Z-index full parsing in CSS (excerpt from Arisisi)

Z-index Full Analysis

The Z-index property determines the cascade level of an HTML element.
The element cascade level is relative to the position of the element on the z-axis (relative to the y-axis of the x-axis).
A higher Z-index value means that this element is closer to the top in the stacking order. This cascade sequence is presented along the vertical spool.

In an HTML page, the natural stacking order (i.e. the order of elements on the z axis) is determined by a number of factors:

• Stacking contexts (cascading environment) elements that have negative values are arranged in the order in which they appear (the higher the back level, the higher the upper);
• Not positioned, without floating block-level elements, arranged in the order in which they appear;
• Not positioned, floating elements, arranged in the order in which they appear;
• Inline elements, arranged in the order in which they appear;
• The elements that are positioned are arranged in the order in which they appear;
• The Z-index property, when used correctly, alters the natural stacking order.

01. Sequence Rules

If you do not set the Position property on a node, the node behind the document flow obscures the previous node.

<div id= "A" >a</div><div id= "B" >B</div>

02. Positioning rules

A: If position is set to static (Positon default), the nodes behind the document flow will still obscure the previous node floats, without affecting the node's cloaking relationship.

<div id= "A" style= "position:static;" >a<<div><div id= "B" >B</div>

B: If the position is set to relative (relative positioning), absolute (absolute positioning) or fixed (stationary positioning), such nodes will overwrite nodes that do not have the Position property set or the property is static, because the former is more than the default level of the latter High.

<div id= "A" style= "position:relative;" >a</div><div id= "B" >B</div>

C: In the absence of z-index attribute interference, according to this sequence rules and positioning rules, can make a complex structure: here A and B are not set position, but to a sub-node A-1 set position:relative. According to the order rule, B overrides A, and A-1 will overwrite B according to the location rule.

<div id= "A" ><div id= "A-1" style= "position:relative;" >a-1</div></div><div id= "B" >B</div>

03. Participation Rules

Adding the Z-index property to a node does not work without the position property.

<div id= "A" style= "z-index:2;" >a</div><div id= "B" style= "Z-INDEX:1;" >b</div><div id= "C" style= "z-index:0;" >C</div>

04. Default Value Rule

* Note: When position is set to relative, absolute or fixed, and no z-index is set, the IE8 default value of Z-index and the Web browser is auto, but IE6 and IE7 are 0.

If all nodes have position:relative defined. A node with a z-index of 0 does not have a definition of z-index at the same level;
However, nodes with z-index greater than or equal to 1 will obscure nodes that do not define z-index;
A node with a negative value of z-index will be overwritten by a node that is not defined z-index.

<div id= "A" style= "position:relative;z-index:1;" >a</div><div id= "B" style= "position:relative;z-index:0;" >b</div><div id= "C" style= "position:relative;" >c</div><div id= "D" style= "position:relative;z-index:0;" >D</div>

05. From the parent rule

* Note: A lot of people will z-index set up very large, 9999 of what all come out, if not to consider the influence of the parent node, set up again big also useless, that is insurmountable level.

A: If a, b nodes are defined position:relative, the z-index of a node is larger than the B node, then the child node of a must be in front of the child node of B.

<div id= "A" style= "position:relative;z-index:1;" ><div id= "A-1" >a-1</div></div><div id= "B" style= "position:relative;z-index:0;" ><div id= "B-1" >B-1</div></div>

B: If all nodes have position:relative defined, the z-index of the A node is as large as the B node,
Because of the order rule, the B node is covered in front of the A node. Even if the z-index value of A's child node is larger than the child node of B, the child node of B will overwrite the child node of a.

<div id= "A" style= "position:relative;z-index:0;" ><div id= "A-1" style= "POSITION:RELATIVE;Z-INDEX:2;" >a-1</div></div><div id= "B" style= "position:relative;z-index:0;" ><div id= "b-1" style= "position:relative;z-index:1;" >B-1</div></div>

06. Hierarchy Tree Rules

You might think that a sibling node in the DOM structure would carry it out to compare and determine the hierarchy.

<div id= "A" style= "position:relative;z-index:2;" ><div id= "A-1" style= "position:relative;z-index:0;" >a-1</div></div><div id= "B" ><div id= "b-1" style= "position:relative;z-index:1;" >B-1</div></div>

We think that at the same time the position is set to relative, absolute or fixed, and z-index the nodes that are assigned by integers,
is placed in a hierarchy tree that is not the same as DOM, and determines the level of display in the hierarchical tree by contrasting z-index.
The above example should be shown if it is represented by a hierarchical tree.

Although the value of A-1 (z-index:0) is smaller than B-1 (z-index:1), because in the hierarchy tree A (z-index:2) and B-1 are at one level, and the value of a is larger than B-1, the A-1 is displayed in front of B-1 according to the parent rule.

07. Participation in Rule II

A: The participation rules mentioned above suggest that as long as the node's position attribute is relative, absolute or fixed, it can participate in the hierarchy comparison,
actually inaccurate. If all nodes have position:relative defined, and the Z-index is set to an integer value, the hierarchy of the child nodes is determined from the parent rule, according to the parent node hierarchy.

<div id= "A" style= "position:relative;z-index:0;" ><div id= "A-1" style= "POSITION:RELATIVE;Z-INDEX:100;" >a-1</div></div><div id= "B" ><div id= "b-1" style= "position:relative;z-index:0;" ><div id= "B-1-1" style= "POSITION:RELATIVE;Z-INDEX:10;" >b-1-1</div></div></div><div id= "C" style= "position:relative;z-index:0;" ><div id= "c-1" ><div id= "c-1-1" ><div id= "c-1-1-1" style= "position:relative;z-index:1;" >C-1-1-1</div></div></div></div>

In the example, a, B-1, c-1-1 as the parent node, the values of Z-index are the same, according to the order rules, c-1-1 before B-1, B-1 before A; Also based on the parent rule, regardless of the child node's Z-index value, c-1-1-1 before B-1-1, b-1-1 before A-1.

B: If we remove the Z-index attribute from all parent nodes, something weird happens. IE6 and IE7 browsers display the same effect, while the child nodes of the Web browser are no longer from the parent, but are determined hierarchically based on their own z-index.

<div id= "A" style= "position:relative;" ><div id= "A-1" style= "POSITION:RELATIVE;Z-INDEX:100;" >A-1</div></div> <div id= "B" ><div id= "b-1" style= "position:relative;" ><div id= "B-1-1" style= "POSITION:RELATIVE;Z-INDEX:10;" >B-1-1</div></div></div> <div id= "C" style= "position:relative;" ><div id= "c-1" ><div id= "c-1-1" ><div id= "c-1-1-1" style= "position:relative;z-index:1;" >C-1-1-1</div></div></div></div>

According to the default rules, there are differences in z-index default values for elements on IE6/IE7 and web browsers.
The node is placed in the hierarchy tree only if position is set to relative, absolute or fixed, and the Z-index assigns an integer value;
When Z-index is the default value, only the hierarchy is compared between the document sibling nodes. In the Web browser, the Z-index of A, B-1 and c-1-1 are auto and do not participate in hierarchical comparisons.

In IE6 and IE7, because the default value of Z-index is 0, it also participates in hierarchical comparisons.

C: nodes that have position but no z-index do not participate in hierarchical tree comparisons, but they also perform hierarchical comparisons with sibling nodes in the DOM.

<div id= "A" style= "position:relative;" ><div id= "A-1" style= "POSITION:RELATIVE;Z-INDEX:100;" >A-1</div></div> <div id= "B" ><div id= "b-1" ><div id= "b-1-1" style= "position:relative; Z-index:10; " >B-1-1</div></div></div> <div id= "C" style= "position:relative;" ><div id= "c-1" ><div id= "c-1-1" ><div id= "c-1-1-1" style= "position:relative;z-index:1;" >C-1-1-1<div></div></div></div>

We have modified the last example, after the B-1 position attribute is removed, the Web browser displays as. According to the positioning rules, A and C-1-1 will appear in front of the B-1; And according to the order rule, C-1-1 also appears in front of A.

In IE6 and IE7, because A and c-1-1 set the Position:relative, and the default value of Z-index is 0, it also participates in the hierarchy tree comparison, so it has the following effect.

Summary: Before the use of Z-index, it is best to first position the various modules, Z-index and hierarchy of the relationship between the clear, so as not to endless. Z-index use of good can solve a lot of mask effect;

Z-index full parsing in CSS (excerpt from Arisisi)