The use of CSS Z-index properties and the concept of hierarchical tree

The Z-index property in CSS is used to set the stacking order of nodes, and nodes with higher stacking order will appear in front of nodes with lower stacking order, which is a common understanding of z-index properties. At the same time, we are always z-index the stacking order, setting the value of the values to a large extent and not necessarily displaying the nodes at the front. This article will use some examples to analyze the usage of z-index, and to bring you into the Z-index hierarchy tree concept.

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.

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

The description of the Z-index property is mentioned in the Z-index property only when the position property of the node is relative, absolute, or fixed.

The Z-index property specifies the stack order of an element. Only works on positioned elements (position:absolute;, position:relative; or position:fixed;).

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

By checking we also found that 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 (hereinafter referred to as Web browser) is AU To, but IE6 and IE7 are 0.

From the parent rule

If A and B nodes both 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.

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

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.

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 the nodes that are assigned by integer Z-index are placed in a hierarchy tree that is not the same as DOM, and the hierarchy is determined by comparing z-index in the hierarchy tree . The above example should be shown if it is represented by a hierarchical tree.

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

Participation in Rule 2

The participation rules mentioned above suggest that as long as the node's position attribute is relative, absolute or fixed, it is not accurate to participate in the hierarchy comparison. 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.

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. We believe that the node is placed in the hierarchy tree only if position is set to relative, absolute or fixed, and 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.

Nodes that have position but no z-index do not participate in a hierarchical tree comparison, but they are also hierarchical compared to 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 are set 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.

Transferred from: http://www.neoease.com/css-z-index-property-and-layering-tree/