Relative/absolute CSS (relative/absolute) Positioning series (3)

ArticleDirectory

• 1. Absolute: Element hiding
• Ii. Absolute and high-level Layout
• Iii. misunderstanding between the absolute attribute and IE6/IE7
• 4. Next highlights

From http://www.zhangxinxu.com by zhangxinxu
Address: http://www.zhangxinxu.com/wordpress? P = 1528

// Zxx: connect directly

1. Absolute: Element hiding

Element hiding and display are very common in page creation and interaction effects.Display: NoneAndDisplay: block/inlineTo realize the explicit and hidden control of DOM elements, then you are out. To display and hide elements, useDisplaySometimes it is a bad method.

There are many methods to control the explicit and hidden elements, but this article does not cover the explicit and hidden elements. Therefore, we only talk about some methods related to absolute.
There are three methods to hide the absolute attribute:

 
. Hidden {
Position: absolute;
Top:-9999em;
}
 

 
. Hidden {
Position: absolute;
Visibility: hidden;
}
 

. Hidden {
Position: absolute;
Clip: rect (1px 1px 1px 1px );/* IE6, IE7 */
Clip: rect (1px, 1px, 1px, 1px );
}
 

There are three key points for controlling the explicit hiding of DOM elements using the absolute attribute:Page availability,Backflow and rendering,With JavaScript Control.

① Availability hiding
The so-called availability hiding means to hide Internet reading aids such as screen readers. Yahoo! Ted Drake, a member of the Usability Lab, tests the availability of screen readers with different hidden methods. The results show that screen readers cannot read the following two hidden methods.

 
. Completelyhidden {
Display: none;
}
 

 
. Visibilityhidden {
Visibility: hidden;
}
 

You don't want to show those hidden panels to any user. UseDisplay: NoneFor the hidden panels.

Screen readers will also ignore sectionsVisibility: hidden.

Therefore, from the availability perspective, elements such as "tab content" and "More Hide and show" are not recommended for hiding and displaying them.Display: None, OrPosition: absolute + visibility: hidden.

For example, the "Show Details" implementation in the introduction to Youku movies or videos is used.Display: None, As follows:

The hidden layer of the public comments network is mostly used.Position: absolute + visibility: hiddenThe method is as follows:

The above hidden content is actually useful information, which cannot be known to users such as blind users who need to use screen readers. Taking Youku as an example, blind users cannot know the complete introduction of the film.

If you want the hidden content to be recognized by the secondary reading device, you cannot use it.Display: NoneAndVisibility: hiddenHide elements. You can use a simulated hiding method, also known as availability hiding. Is the following two hidden methods.

 
. Hidden {
Position: absolute;
Top:-9999em;
}
 

 
. Hidden {
Position: absolute;
Clip: rect (1px 1px 1px 1px );/* IE6, IE7 */
Clip: rect (1px, 1px, 1px, 1px );
}
 

However, you can useDisplay: NoneOrVisibility: hidden.

Additional instructions:If the hidden element contains a link element or a control element that can obtain the focus, it is used to hide the availability. These hidden links and controls can also respond to the keyboard focus tab switch, but this will make the keyboard user confused and confused. Therefore, in some sense, in some cases, screen reader users and keyboard users must be considered simultaneously.

② Backflow and rendering
I have previously translated two articles on reflux and repainting, "reflow in the browser is minimized", and "reflux and repainting: CSS performance slows down JavaScript ?".

I have never tested it myself. However, according to the above two articles and a reputation front-end predecessor, using absolute to hide a display element will produce a re-painting without a strong backflow. And useDisplay: NoneIt not only redraws, but also produces backflow. The wider the DOM impact scope, the stronger the reflux. Therefore, in terms of the rendering performance of JavaScript interaction, the use of absolute to hide is better than that of display-related hiding.

③ Control with JavaScript
When it comes to element display and hiding, it is inevitable to interact with JavaScript. For example, if the display is hidden in the displayDisplay: block/inline-block /...AndDisplay: None.
To hide elements, you can simply:

 
Dom. style. Display = "NONE ";
 

But what if you want to show hidden elements? Because the display levels of different labels are different, it is difficult to have a simple and uniform display method. For exampleCodeIt may be used inDiv,PLabel, but for the span and other inline level elements, it may be fart (the original line shows the result line feed ).

Dom. style. Display = "Block ";
 

Moreover, with the continuous improvement of browsersDisplay: Table-Cell,Display: List-itemWill be used more and more. It is more difficult to implement a general explicit/hidden method through display.

This is the limitation of using the display attribute to control the explicit and hidden elements. The explicit and hidden methods of jquery are introduced.Show ()/hide ()/toggle ()Is based onDisplay, It will store the previousDisplayAttribute value, so the elements can be accurately displayed when they are displayed.DisplayValue.

You can click here: explicit and hidden tests of jquery and display

Some element hiding methods implemented by absolute positioning are much simpler. For example:Position: absolute + visibility: hiddenWhen we want to display elements (originally non-absolute positioning elements), we need to set:

 
Dom. style. Position = "static ";
Dom. style. Visibility = "visible ";
 

SimilarPosition: absolute + TOP:-999emWhen we want to display elements (originally non-absolute positioning elements), we only need to set:

 
Dom. style. Position = "static ";
 

Instead of worrying about whether the original label is inline or block level. Therefore, in terms of explicit and hidden JavaScript control, the absolute-related method is slightly better than the display method.

Based on the above three points, we can see that the current dominantDisplay: block/NoneThe method of displaying and hiding control elements is actually a method that has many disadvantages. In fact, this kind of activity (element explicit and hidden) is more suitable for handing over to the absolute attribute,Displaying and hiding control elements is the main business of the absolute attribute.. // Zxx.

If you see the following text, it may be because reading this article on other websites or RSS, the original address of this article: http://www.zhangxinxu.com/wordpress? P = 1528, Author: Zhang xinxu, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Ii. Absolute and high-level Layout

Taking a simple two-column layout as an example, the left column and the right column have different background colors, and the border lines are separated between them. How can this problem be achieved? As the content varies, the height of the left column may be higher, or the height of the right column may be higher. Therefore, to achieve seamless color filling, setting the height does not work, and setting the height to ignore it obviously does not work. At this time, the solution is to make the left and right columns High.

I wrote a small tip named "/" earlier. The implementation principle is as follows:

 
Margin-bottom:-3000px; padding-bottom: 3000px;
 

Later I mentioned the usage of "display: Table-cell applications I know ".Display: Table-CellAchieves a high-level layout.

Here we will introduce how to useAbsoluteAchieves a high-level layout.

As described earlier in the seriesPosition: absoluteThe element has no width or height. We can use this feature to achieve the effects required by the High-Level layout, such as the high background color and border effects.

You can click here: absolute positioning and high-level layout demo

Click the two buttons on the demo page to see whether the left column is high or the right column is high, the background color on both sides is pure, and the vertical separation line in the middle is straight, as shown below:

The core CSS code for achieving high performance is as follows:

 
. Pai_height {width: 100%; Height: 999em; position: absolute; left: 0; top: 0 ;}
 

At the same time, the following conditions are met:

1. The absolute positioning layer of 999em is located in the sidebar container, and the sidebarPositionIsRelative
2. The actual content of this column is wrapped in a label layer with a sibling relationship with the absolute positioning layer,PositionIsRelative,Z-IndexValue1Or other
3. Set the parent label on the left and right columnsOverflow: hiddenIn addition, to be compatible with IE6/7, you must setPositionIsRelative

Note the preceding conditions:

The principle is simple: because the absolute positioning element has no height and no width, we can forge an absolute positioning layer with a high enough height (set the background color, border, and other attributes ), at the same time, if the parent label overflow is set to hide, the extra high-level wine will not be displayed, and the like layout will be achieved. For details, see the code display on the demo page. I believe it is easy to understand.

If you see the following text, it may be because reading this article on other websites or RSS, the original address of this article: http://www.zhangxinxu.com/wordpress? P = 1528, Author: Zhang xinxu, from Zhang xinxu-xin space-xin Sheng live, visit more excellent technical articles from the original source. Iii. misunderstanding between the absolute attribute and IE6/IE7

There are indeed many compatibility issues with the absolute attribute. First, some bugs related to the location of the absolute attribute (such as the IE6 parity bug) are not discussed here. // Zxx: many people know that it is boring.

Therefore, the "Misunderstandings" shown below do not have positioning attributes (I .e. left/top/right/bottom ).

1. Misunderstanding of absolute positioning elements overlapping in margin positioning Elements
I used to encounter this problem. I can't simulate it today. I'm leaving it empty. I'll make it up ...... (* ^__ ^ *) Xi ......

Supplement:
In the double-column adaptive layout, the absolute element on the left is absolutely positioned, And the margin on the right is positioned by distance. You can refer to the application on the instance page of Sina Weibo in the article "Page reconstruction Xin San no-criterion no-width criterion" (there is padding distance ).

In order to reproduce the misunderstanding that the argin positioning element in IE6/IE7 absolutely locates overlapping elements, I made a simple demo page. You can click here: demo of overlapping the margin and absolute elements in IE6/7

In IE6/7, the image with the absolute attribute applied on the left overlaps with the adaptive text content on the right, as shown in (captured from IE7 ):

The cause of this problem is similar to the following floating and absolute positioning elements overlap, because the problem is related to the label level of the absolute positioning element: In the demo above, the label of the absolute attribute is a div label, which is a horizontal element of the block. As follows:

If we change the DIV element of the block level to the span tag of the inline level, the overlap problem will be eliminated. As follows:

Click here to fix the overlap between the margin and absolute elements in IE6/7.

If your browser is IE6/IE7, there will be no overlapping bugs when you click the demo page above, and the fix of this problem is very simple to change the DIV tag to span, as follows:

2. Misunderstanding of overlapping floating and absolute positioning Elements
Very simple. The first label is a floating element, followed by an absolute block-level positioning element. The result is IE8 +, and the modern browser text overlaps with the image; however, IE6/IE7 is displayed side by side. As shown in the following figure:

You can click here: Floating element absolute positioning element overlapping demo

The CSS code is as follows:

 
. Box {padding: 1em; Background-color: # f0f3f9; overflow: hidden; _ ZOOM: 1 ;}
. L {float: Left ;}
. Abs {position: absolute ;}
 

The HTML code is as follows:

 
<Div class = "box">

<Div class = "ABS"> Hey, isn't this Miss Zhang hanyun? </Div>
</Div>
 

Why do the floating images in modern browsers and IE8 + and absolute positioning text overlap, while IE6/7 is a parallel display? This is because IE6/IE7 does not differentiate the inline horizontal label element from the block horizontal label element and render it equally. As I have mentioned many times before,Elements with the absolute positioning attribute applied are encapsulated, which is equivalent to inline-block elements with no height or width..

In fact, the conclusion in italic bold mentioned above is not rigorous enough. In IE6/IE7 browser, the above is true. In all browsers, for inline horizontal elements, the above is true, but in modern browsers, the above conclusions have some doubts about the block level elements. In fact, rendering based on the correct absolute positioning, likeDiv, PThis type of block horizontal tags are not completely inline-blocked. The inline-block elements have three major features: encapsulation, high-width definable, and text-and-image mixing. However,Div, PThis type of tag has been applied.Position: absoluteIn non-IE6/7 browsers, only the package and high width can define these two features, but does not support image mixing, that is, when the text is together with the picture will wrap.

The following is an example to verify the above conclusion. First of all, the following sentence is true for the inline level elements ". In fact, if it is an inline level element, the above example will not have compatibility problems, so we appliedABSClass NameDivLabelSpan, The following HTML code:

 
<Div class = "box">

<SPAN class = "ABS"> Hey, isn't this Miss Zhang hanyun? </Span>
</Div>
 

The result is as follows:

Not only IE8 browsers, Firefox, chrome, and other previously overlapped items are displayed side by side.

You can click here: the floating and inline horizontal absolute positioning elements do not overlap demo

Next, let's verify this conclusion: "The horizontal block elements in modern browsers cannot be mixed with images after being absolute ". It is also very simple. We can take out the floating attribute of the image in the above overlapping example, that is, the following HTML code:

 
<Div class = "box">

<Div class = "ABS"> Hey, isn't this Miss Zhang hanyun? </Div>
</Div>
 

The result is as follows:

In IE6/IE7 browsers, drops are still displayed side by side, such:

OK. Now, we should be able to understand why the text in modern browsers overlaps with those in IE6/IE7.

The "no height" feature of floating elements is described many times in the "CSS float floating deep research, detailed explanation and expansion" series.Float: leftAfter the attribute, the height occupied by the image is lost. Therefore, the text originally displayed in the following line feed is put on, thus overlapping is formed, such as the mark:

4. Next highlights

The following describes the relative attributes, including:
The placeholder of relative;
Principle of minimizing influence of relative;
The repair function of relative in some bugs;
......

Time is too short and the qualifications are limited. It is inevitable that the article may be inaccurate or incorrectly understood. Thank you very much for your correction.

Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 1528

(This article is complete)