Relationship between css z-index and Dom Structure

Z-index attributes

Reference:
Z-index: auto | Number

Auto: default value.
Number: an integer with no unit. It can be a negative number.

Elements with a large Z-index value are superimposed on elements with a small Z-index value. For positioning objects that do not specify this attribute, objects with a positive Z-index value are placed above it, while objects with a negative Z-index value are placed under it.

Note: This property does not apply to window controls, such as selct objects. In IE 5.5 +, IFRAME objects start to support this attribute. In earlier browser versions, the IFRAME object is a window control, and this attribute is ignored.

The Z-index attribute is applicable to positioning elements (objects whose position attribute value is relative, absolute, or fixed). It is used to determine that the positioning element is perpendicular to the display (called the Z axis) stack order ).

Each positioning element belongs to a stacking context. The root element forms the root stacking context, while other stacking context is generated by the positioning element (the Z-index of the positioning element is defined as a non-auto Z-index value ), the positioning sub-element takes the local stacking context as a reference and uses the same rules to determine the cascade order. In addition, stacking context and containing block are not necessarily related.

When the stacking context is the same, the value of Z-index is used to determine how to display it. If the value of Z-index is the same (that is, the stack level is the same ), it is stacked in the back-to-front order.

When either element is stacked and another element is contained in different stacking context elements, the order of display is determined by the stack level of stacking context. That is to say, in the same stacking context, the order is determined by the Z-index of the stacking context. For example:
The positioning Element A (Z-index: 100) contains the positioning Element A1 (Z-index: 300), while the positioning Element B and the element a sibling relationship (Z-index: 200 ). You will find that no matter how big the Z-index of A1 is, it will be overwritten by B where Z-index is 200, because the Z-index of A is only 100.

Z-index bug in IE
First, let's look at the code section of a demo.
XHTML section:

1 <Div id = "Container">
2 <Div id = "box1"> the box should be above </div>
3 </div>
4 <Div id = "box2"> This box should be located below. ie will generate a new stacking context for the positioning element, even if the element Z-index is "Auto ". </Div>

CSS section: 1 # container {}{ position: relative ;}
2 # box1 {}{ position: absolute; top: 100px; left: 210px; width: 200px; Height: 200px; Background-color: yellow; Z-index: 20 ;}
3 # box2 {}{ position: absolute; top: 50px; left: 160px; width: 200px; Height: 200px; Background-color: green; Z-index: 10 ;}

The two boxes are completely located. The box1 with the background color yellow has the Z-index attribute value 20, while the box2 with the background color green has the Z-index attribute value 10, the only difference is that the box1 with a yellow background color is placed in a div with the property position: relative defined, and before the source code of the document.

Based on the above Code and the Z-index attribute introduction, we will analyze the position where the above Code will produce results.

CSS specification clearly stipulates that except the root element, only the Z-index of the positioning element is defined as a non-auto Z-index value to generate a new stacking context. In this example, the relative positioning element does not define z-index, that is, Z-index is the default value auto. Therefore, it does not affect the cascade order of child elements. That is, the stacking context of the box1 with the yellow background color and the box2 with the green background color are the same, that is, the root stacking context generated by the root element. Then, when the stacking context is the same in the rule, the value of Z-index is used to determine how to display it, the background color of Z-index attribute value 20 should be yellow. The box1 should be above the box2 where the background color of Z-index attribute value 10 is green.

Next we will test the final results in ff and IE respectively, and we will find that the results displayed in FF are exactly the same as those analyzed above, but the display in IE is inconsistent.

Confused: the box in which the background color of the Z-index attribute value 10 of IE is green is above the box1 in which the background color of the Z-index attribute value 20 is yellow, which is completely different from the analysis result, why?
Confusing: in fact, this is a bug in IE (Windows). In ie, the positioning element will generate a new stacking context and start from the value of Z-index to 0.

Now let's understand the display logic of the preceding demonstration in IE. A newly located stackiner is set to generate a new stacking context. Therefore, box1 with a yellow background color of the child element to be located determines the Stacking Sequence Based on the new stacking context. The background color is the green box2. At this time, the parent element container of the box1 with the background color yellow is the same stacking context, so they decide the stacking order according to Z-index, that is, if the value of Z-index is 10 and the background color is green, box2 is placed on the container with the value of Z-index 0.

In fact, this bug has a wide range of impact, but we do not pay much attention to it at ordinary times. The following describes the most common occurrence of the negative value parsing of Z-index. Many friends think that IE supports the negative value of Z-index due to the existence of this bug, FF does not support negative values of Z-index.

For example, it may be more expressive.

XHTML section:

1 <body>
2 <Div id = "Container">
3 <Div id = "box1"> Why are the positioning elements of negative values different under IE and FF? Why? </Div>
4 </div>
5 </body>

CSS section:

1 # container {}{ position: relative ;}
2 # box1 {}{ position: absolute; top: 100px; left: 210px; width: 200px; Height: 200px; Background-color: yellow; Z-index:-10 ;}

 
You will find that the box1 with a yellow background color disappears under ff, but the box1 with a yellow background color is displayed under IE. This is also what I said above. Some friends arbitrarily think that IE supports the negative value of Z-index, while FF does not support the negative value of Z-index. We need to look at the essence through phenomena.

In the analysis in the previous example, we know that the position: relative element is set but the non-auto Z-index does not generate the stacking context, this will not affect the cascade order of its child elements. Therefore, the stacking context of the box1 with a yellow background color is the root stacking context generated by the root element. In the previous section, we talked about "for positioning objects that do not specify this attribute, objects with a positive Z-index value will be placed above it, the objects whose Z-index value is negative are below them. ", according to the rules, the yellow box1 with the Z-index set to-10 is displayed under the element (such as the body) without the Z-index attribute specified. So the box1 with a yellow background color disappears under ff. In ie, the container with the relative position will have the Z-index value 0, and a new stacking context will be generated. The box1 with the background color yellow will cascade the order in the new stacking context, therefore, it is displayed in IE.

However, there is another problem here. For the above Code, let's streamline it:

XHTML section:

1 <body>
2 <Div id = "box1"> Why are the positioning elements of negative values different in IE and FF? Why? </Div>
3 </body>

 
CSS section:

1 # box1 {}{ position: absolute; top: 100px; left: 210px; width: 200px; Height: 200px; Background-color: yellow; Z-index:-10 ;}

You will find that the result is consistent with that shown in the Code not simplified above. However, it may not be explained in IE. At this time, it is understood that the stacking context of box1 with the background color yellow is the root stacking context generated by the root element both in ff and IE.

Confused: in IE browser, the box1 with the background color yellow should also disappear, but it does not.
Confused: the IE browser seems to have default position: relative for the body element ).