A conceptual description of hierarchical relationship precedence for CSS Z-index

This article mainly introduces the CSS Z-index hierarchy relationship Priority concept Description, the more detailed explanation, the need for friends can refer to the next.

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.

The code is as follows:

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

Examples of CSS Z-index property order rules

Positioning rules

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

The code is as follows:

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

Example of CSS Z-index property positioning rules, static

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 .

The code is as follows:

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

Example of CSS Z-index property positioning rules, relative | Absolute | Fixed

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 both A and B, but A-1 set position:relative for the child nodes of a. According to the order rule, B overrides a and, according to location rule a ', overrides B.

The code is as follows:

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

Examples of CSS Z-index properties covering each other

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.

E-commerce site sidebar List of categories

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 code is as follows:

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

CSS Z-index attributes Participate in the rule example, when there is no explicit positioning

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;).

The code is as follows:

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

CSS Z-index Properties Participate in the rules example, explicitly positioned nodes to use the Z-index property

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.

The code is as follows:

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

Example of a CSS Z-index property default value Rule

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

The code is as follows:

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

CSS Z-index properties from the parent rule example, the child node does not set the hierarchy

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.

The code is as follows:

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

CSS Z-index properties from the parent rule example, insurmountable hierarchy

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.

The code is as follows:

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

Example of CSS z-index attribute hierarchy tree Rules

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.

Hierarchical Tree of CSS Z-index

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.

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.

The code is as follows:

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

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.

CSS Z-index Properties Participate in the example of Rule 2, all nodes participate in hierarchical comparison

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.

The code is as follows:

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

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.

CSS Z-index Properties Participate in the example of Rule 2, Z-index for auto nodes do not participate in hierarchical comparison

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

CSS Z-index Properties Participate in the example of Rule 2, IE6 and IE7 z-index default to 0

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.

The code is as follows:

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

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.

CSS Z-index Property participates in the example of Rule 2, the node position for auto does not participate in the hierarchical tree comparison, but still participates in the hierarchical comparison among DOM sibling nodes, the Web browser

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.

CSS Z-index Properties Participate in the example of Rule 2, Position for auto nodes do not participate in hierarchical tree comparisons, but still participate in hierarchical comparisons among DOM sibling nodes, IE6 and IE7

Summarize

Browser node display level is a laborious work, today you think block a will always be pinned, but tomorrow because of demand changes, suddenly appear B element needs to be pinned. One layer to the top of the pile, one day to look back, found a lot of blocks staggered together, and their value of a bigger than a big, not clear the clue. I think before the fencing work, it is best to first position, z-index and hierarchical relationship between the clear, lest endless.

Also, do not use JavaScript to calculate z-index, and set the Z-index of a node to be the highest in all nodes.

Because the length is too long, this article only discusses from the node attribute angle, does not involve the select and the IFrame and so on special page node consideration, if has the opportunity next time for everybody to share.