How to use CSS z-index attribute and the concept of hierarchical tree_html/css_WEB-ITnose

The z-index attribute in CSS is used to set the stacking order of nodes. Nodes with a higher stacking order will be displayed in a lower stacking order. In front of the node, this is our common understanding of the z-index attribute. At the same time, we are always unclear about the stacking order. Setting the z-index value to a large value may not necessarily display the node at the front. This article will analyze the use of z-index through some examples, and introduce to you the concept of z-index hierarchical tree.

order Rule

If the position attribute is not set on the node, the node located at the back of the document flow will cover the previous node.

Positioning rule

If position is set to static, nodes located behind the document flow will still cover the floating nodes in front, so position:static will not affect the covering relationship of nodes.

If position is set to relative (relative positioning), absolute (absolute positioning) or fixed (fixed positioning), such a node will overwrite nodes that do not have a position attribute set or the attribute value is static, indicating that the former is worse than The default level of the latter is high.

Without interference from the z-index attribute, according to the order rules and positioning rules, We can make a more complex structure. Here we do not set position for A and B, but set position:relative for A's child node A-1. According to the order rules, B will cover A, and according to the positioning rules A ' will override B.

Participation rules

Without the position attribute, add the z-index attribute to the node. z-index has no effect on nodes.

The W3C description of the z-index attribute mentions that the z-index attribute only affects the position of the node. It takes effect when the attribute is relative, absolute or fixed.

Default value rule

If all nodes have position defined :relative. Nodes with a z-index of 0 and no z-index defined are in the same level; but nodes with a z-index greater than or equal to 1 will cover nodes with no z-index defined; the value of z-index is Negative nodes will be overwritten by nodes with no z-index defined.

By inspection we also found that when position is set to relative, absolute or fixed, and not When setting z-index, the default value of z-index for IE8 and above and W3C browsers (hereinafter collectively referred to as W3C browsers) is auto, but IE6 and IE7 are 0.

From parent rule

If position:relative is defined for both nodes A and B, and the z-index of node A is larger than that of node B, then the child nodes of A must cover the front of the child nodes of B.

If all nodes define position:relative, the z-index of node A is the same as that of node B, but due to the ordering rules, node B covers the front of node A. Even if the z-index of node A is If the value is larger than the child node of B, the child node of B will still cover the front of the child node of A.

Many people set the z-index very large , 9999 and so on. If you don’t consider the influence of the parent node, it will be useless no matter how big it is. It is an insurmountable level.

Level tree rules

You may think that the sibling nodes in the DOM structure will be pulled out for comparison and hierarchy, but this is not the case.

We think that the position should be set to Nodes that are relative, absolute or fixed, and whose z-index is assigned an integer value, will be placed in a hierarchical tree that is different from the DOM, and the displayed level is determined by comparing the z-index in the hierarchical tree. If the above example is used If represented by a hierarchical tree, it should be as shown in the figure below.

In the figure, although the value of A-1 (z-index:0) is larger than that of B-1 ( z-index:1) is small, but because A (z-index:2) and B-1 are at the same level in the hierarchical tree, and the value of A is larger than B-1, according to the parent rule, A-1 is displayed in B-1 front.

Participation Rule 2

The participation rules mentioned above believe that as long as the position attribute of the node is relative, absolute or fixed, it can participate in the hierarchical comparison. In fact, it is not accurate. If all nodes have position:relative defined , and set z-index to an integer value. According to the parent rule, the level of the parent node determines the level of the child node.

In the example, A, B -1, C is the parent node, and the z-index value is the same. According to the order rule, C is before B-1, and B-1 is before A; and according to the parent rule, no matter what the z-index value of the child node is, C-1-1-1 is before B-1-1, and B-1-1 is before A-1.

If we add all parent nodes After the z-index attribute was removed, something strange happened. The display effect of IE6 and IE7 browsers remained unchanged, while the child nodes of W3C browsers no longer determined the level from the parent, but based on their own z-index.

According to the default value rules, there is a difference in the z-index default value of elements on IE6 / IE7 and W3C browsers. We believe that only when position is set to relative, absolute or fixed, and when z-index is assigned an integer value, the node is placed in the hierarchical tree; when z-index is the default value, only hierarchies are compared between document sibling nodes. In the W3C browser, A, B-1 and C- The z-index of 1-1 is auto and does not participate in hierarchical comparison.

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

Although nodes with position set but no z-index do not participate in hierarchical tree comparison, they will still be in the DOM. Perform hierarchical comparison with sibling nodes.

Let’s modify the previous example. After deleting the position attribute of B-1, the W3C browser displays the following image. According to the positioning rules, A and C will be displayed in front of B-1; and according to the order rules, C will be displayed in front of A.

in IE6 and IE7 , because A and C-1-1 are set to position:relative, and the default value of z-index is 0, they also participate in hierarchical tree comparison, so the following effect is achieved.

Reposted from: How to use CSS z-index attribute and the concept of hierarchical tree