What does the Z-index property in CSS mean?

Concept

The Z-index property sets the stacking order of elements. Elements that have a higher stacking order are always in front of elements that are lower in stacking order.

Comparison of hierarchical relationships

1. For sibling elements, the elements that follow the document flow in the default (or position:static) case will overwrite the previous.

2. For sibling elements, position is not static and Z-index exists, z-index large elements overwrite Z-index small elements, that is, the greater the Z-index priority.

3. Ie6/7 under position is not static, and Z-index does not exist when Z-index is 0, in addition to the browser Z-index for auto.

4. Z-index elements that are auto are not involved in the comparison of hierarchical relationships, and are represented by elements that traverse up to this and z-index not auto.

Order 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>

Positioning rules

If position is set to static, the nodes behind the document flow will still obscure the previous node floats, so the position:static node's cloaking is not affected.

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

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 a position attribute set or the property value is static, indicating that the former is higher than the default level of the latter.

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

In the absence of z-index attribute disturbances, we can make more complex structures based on this sequential rule and positioning rules. Here we do not set position for a and B, but A-1 for the child nodes of a position:relative . According to the order rule, B overrides a, and according to location rule a ' will overwrite B.

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

When did the above cover each other to use such an implementation? It seems that the door, in fact, is very commonly used, for example, e-commerce site side column of the list of categories can be implemented with this technique.

is the category of a site display area, class two for the purpose of the suspended layer covering the first class list of the box, and the first class of the purpose of the node covering class two suspended layer. If the use of CSS to achieve the results, the first Class purpose box is equivalent to the above example of a, the first class purpose node equivalent to A-1, class two for the purpose of the suspended layer is equivalent to B.

Participation rules

We tried not to position the property, but to add the Z-index property to the node. Found that Z-index did not work on the node. The Z-index property only takes effect when the position property of the node is relative, absolute, or fixed.

<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>

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

Default value Rule

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>

From the parent rule

If A and B nodes all define position:relative, the z-index of a node is larger than the B node, then A's child node 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>

If all nodes have position:relative defined, the z-index of the A node is as large as the B node, but because of the sequential rules, 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.

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