Full parsing of Z-index in CSS

Z-index Full resolution

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 (as opposed to the x axis y axis).
A higher Z-index value means that the element is closer to the top in the stacking order. This cascade sequence is rendered along the vertical spool.

In an HTML page, the natural stacking order (that is, 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);
• Without being positioned, there is no floating block-level element, arranged according to the order of occurrence;
• The elements that are not positioned and floating are arranged in the order in which they appear;
• The inline elements are arranged in the order of occurrence;
• The elements that are positioned are arranged in the order in which they appear;
• The Z-index property, when used correctly, changes the nature of the stacking order.

01. Order Rules

If you do not set the Position property on the node, the node behind the document stream obscures the preceding node.

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

02. Positioning rules

A: If you set position to static (positon default), the nodes that are behind the document stream will still obscure the previous node float and will not affect 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 (anchored), such nodes will overwrite nodes that do not have the position attribute 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 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 overrides B according to the positioning rule A-1.

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

03. Rules of participation

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

<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 for above Z-index and the Web browser is auto, but IE6 and IE7 are 0.

If all nodes have a position:relative defined. A node with a z-index of 0 does not have a high or low level at the same level as the undefined z-index;
However, nodes with z-index greater than or equal to 1 will obscure nodes that do not have a defined z-index;
A node with a negative value of z-index will be overwritten by a node that does not have a 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 very large, 9999 what all come out, if do not consider the influence of the parent node, set to no longer useless, it is insurmountable level.

A: If a, b node has defined position:relative, a node's z-index is larger than b node, then A's child node must be covered in front of the sub 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 Node A is as large as the B node,
Because of the sequential rule, the B-node is overwritten in front of node A. Even if the Z-index value of a is larger than the sub node of B, the child node of B will still be overwritten in front of 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 Rule

You may feel that sibling nodes in the DOM structure will be picked up to compare and determine the hierarchy, but it's not.

<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 believe that position is also set to relative, absolute or fixed, and that the nodes that are assigned by integers are z-index,
are placed in a hierarchical tree that is not the same as the DOM, and the hierarchy is determined by contrasting z-index in the hierarchy tree.
The above example should be represented by a hierarchy tree, as shown in the following figure.

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

07. Participation in Rule II

A: The participating rules mentioned above assume that as long as the position attribute of the node is relative, absolute or fixed, it can participate in the hierarchy comparison.
is not actually accurate. If all nodes have position:relative defined, and the Z-index is set to an integer value, the hierarchy of the parent node determines the level of the child node, based on the parent rule.

<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 of a, B-1, c-1-1 as the parent node, the Z-index values are the same, according to the order rules, c-1-1 before B-1 before A; And according to the rule from the parent, regardless of the z-index value of the child node, c-1-1-1 before B-1-1, b-1-1 before A-1.

B: If we remove all the z-index attributes of the parent node, something weird happens. The IE6 and IE7 browsers display the same effect, and the child nodes of the Web browser are no longer from the parent, but the hierarchy is determined by its 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>

Depending on the default value rule, the IE6/IE7 and the elements on the Web browser have the difference between z-index default values.
When the position is set to relative, absolute or fixed, and the Z-index assigns an integer value, the node is placed in the hierarchy tree;
When Z-index is the default value, only the hierarchy is compared between the document sibling nodes. In the Web browser, a, B-1, and c-1-1 Z-index are all auto and do not participate in the hierarchy comparison.

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

C: A node that has a position but no z-index does not participate in hierarchy tree comparisons, but also in the DOM with sibling nodes.

<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 previous example, after the B-1 position attribute is deleted, the Web browser displays the following image. According to the positioning rules, A and C-1-1 will be shown in front of the B-1; According to the order rules, C-1-1 is also shown in front of A.

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

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