We recommend that you have a deep understanding of position and Z-index attributes in CSS.

Author: cutsin
Address: http://www.moonless.net/blog/2007/09/csspositionz-index.html

Note: This article is for communication purposes only. If you have any mistakes, please criticize and correct them, but please indicate the details. Thank you!

Because it is not usually used, the absolute and relative values of position attributes were vague when CSS was written in the past. The stacking of Z-index was hard to understand, except for understanding the factors, different browser parsing results are also a big problem. I carefully read the CSS document today, and finally had a deep understanding of the floating and positioning of the box model.

In practice, we may encounter the following problems:
1. Make a horizontal navigation, and then the drop-down menu appears after the mouse goes through, the position control of the drop-down menu is a key;
2. We want to add several bubble prompts floating on the page in a normal page layout. At this time, we do not want the bubble prompt to disrupt the normal document layout, I don't want the bubble prompts to be positioned everywhere in different browsers.
3. When we insert a small icon in a normal text, the label is generally used, and the vertical center problem is confusing, whether you use the HTML attribute absmiddle, the CSS attribute vertical-align, or the parent object heigh + line-height, it will always look different in different browsers.

Well, have you ever encountered any of the above questions? If you do not have a good solution yet, you may wish to continue reading this article, which may be helpful to you :)
Let's take a look at several definitions of the position attribute:
Position: static, absolute, relative

Static: Default value. If the position attribute is not specified, all HTML Objects supporting the position attribute are static by default. It can be understood that the HTML page is treated as a document stream,Source codeThe order in which tags are displayed is the order of their corresponding objects. All objects whose values are static are displayed in sequence according to the HTML tags you have compiled.
As shown in, this is a common horizontal navigation that specifies float: Left:

Relative: Relative positioning. This property value keeps the position of the object in the Document Stream. That is to say, it has the same rendering mode as static. It also occupies a fixed position in the document stream, and the subsequent objects will not be encroached on or overwritten; different from the static property value, the relative object can be set to its new display position through the top, left, right, and bottom attributes, the values of these four attributes are relative to the previous object of the Document Stream. You can freely set these four attributes to offset to a new location without any impact on other objects in the Document Stream, the original page is still displayed as follows:

Absolute: Absolute positioning. Different from relative, this property value will drag the current object out of the document stream, and the subsequent objects will occupy the original position. That is to say, the current object is displayed independently, however, its position is inherited before any of the top, left, right, and bottom attributes are specified. At this time, the values of the four attributes are relative to those of the browser and are irrelevant to the Document Stream. If you set Area B in the example to absolute without specifying four location attributes, you can set margin to change its relative location. This method can solve problem 2 mentioned above.

Prompt: The difference between the scroll bars in relative and absolute positioning is not absolute in the css2.0 manual of Suwon. At least the scroll bars in Firefox, opera, and Safari will still appear.

Prompt B: If the attribute value is the Z-index attribute of the absolute object, you can set the display order of the layers, which is effective directly;
When setting the Z-index attribute of the relative object, you must be careful. Setting the Z-index of the current object to-1 is not acceptable, it will not be displayed in Firefox (Note: it does not mean that the browser is incorrect, but that if the parent object is the root element body, then z-index is invalid, any Z-index setting will not be displayed after the root element, except for the parsing bug of IE, thanks #19). It must be set to 0 or above. If we want other objects to block it, you only need to set the position of other objects to relative and take the Z-index attribute to a value greater than relative.

The above statement may not be very clear, but you need to do it yourself.

In this way, we can solve the problem above. Problem 3 can be set to relative or absolute positioning based on the design requirements;
There are also many solutions to problem 1. I personally recommend using DL, DT, and DD with semantics, and this method performs basically the same in different browsers (already in IE, Firefox, opera, Safari testing), only a few pixels of the top attribute difference, due to the time relationship, I can only give my own test Code For reference:
<Br/> body {<br/> color: # FFF; <br/> font-size: 12px; <br/>}< br/> ul Li {<br/> float: Left; <br/> Height: 30px; <br/> background-color: #99cc99; <br/> margin: 0 10px; <br/> padding: 0; <br/> border: 1px solid # C30; <br/> width: 100px; <br/>}< br/> ul Li Div {<br/> border: 1px solid # f00; <br/> background-color: #996666; <br/> width: 100px; <br/> Height: 100px; <br/> position: absolute; <br/> margin-top: 15px; <br/> margin-left:-1px; <br/> * margin-left:-79px; <br/>}< br/> ul Li DL, <br/> ul Li dl dt, <br/> ul Li DL dd {<br/> margin: 0; <br/> padding: 0; <br/>}< br/> ul Li DL dd {<br/> border: 1px solid # f00; <br/> background-color: #996666; <br/> width: 100px; <br/> Height: 100px; <br/> position: absolute; <br/> margin-top: 11px; <br/> * margin-top: 10px; <br/> margin-left:-1px; <br/>}</P> <ul> <li> title-# text </P> drop-down menu-Div </LI> <li style = "position: relative; "> List B </LI> <li> List C </LI> <li> <DL> <DT> title-dt </DT> <DD> drop-down menu-dd </DD> </dl> </LI> </ul> <p>
[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]

For more information, see the following in IE and non-ie browsers:

<textarea id="runcode70287"><Br/> <style>. main {width: 500px; Height: 500px; Background-color: # 9cf ;}. layer_a ,. layer_ B ,. layer_c ,. layer_d {position: absolute; width: 100px; Height: 60px ;}. layer_a {background-color: # 69c ;}. layer_ B {background-color: #369 ;}. layer_c {background-color: # Eee ;}. layer_d {background-color: #696 ;}. BRD {border: 1px solid # C30; margin: 1em ;}. block {display: block ;} </style> A text segment a Text Segment another text segment a text <P class = "BRD"> the third paragraph different text </P> <P class = "BRD block"> the fourth section specifies the block text. </P> <p> the fourth section specifies the block text. <p> </P> <map class = "BRD block"> the fourth section specifies the block text. </map> <dd class = "BRD"> the fourth section specifies the block text </DD> <li class = "BRD"> the fourth section specifies the block text </LI> <p></textarea>
[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]

From this example, we can see that when ie absolutely positions a block element, if the parent element is a block-level element, it will still inherit the coordinates of the original position after the document flow is dragged out;
Instead of the IE browser, the method is to drag the Document Stream and locate the coordinates of the parent element directly.