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

CSSIn the Z-index PropertyTo set the stacking order of nodes, 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 bring you into the Z-index Hierarchy TreeThe concept. Order rules If you do not set the Position property on a node, the nodes that are behind the document flow will obscure the previous node. Positioning rules If you set position to static, the node behind the document flow still obscures the previous node float, so position:staticDoes not affect the node's cloaking relationship. 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 . 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 for the child node of a A-1 set position:relative. According to the order rule, B overrides a, and according to the location rule a ' overrides the b.  participation rule without the position attribute, the node plus the Z-index attribute. Z-index does not work on nodes.  W3C The Z-index attribute is mentioned in the Z-index property only if the position property of the node is relative, absolute, or fixed when the .  default rule as Position:relative is defined for all nodes. 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 .  by checking we also find that when position is set to relative, absolute or fixed, and no z-index is set, IE8 above and Web browser (hereinafter we collectively referred to as the Web browser) z-index default value is auto, but IE6 and IE7 is 0. From the parent rule if a, B nodes all define position:relative, a node's z-index is larger than the B node , then A's child node must be covered in front of the child node of B .  if all nodes have position:relative defined, the Z-index of a node is as large as the B node, but because of the sequential rules, the b node is covered by the A node. Even if the child node of a is larger than the z-index of B, the child node of B will still be covered in front of the child node of a .  a lot of people will z-index set up very large, 9999 what all come out, if not consider the influence of the parent node, it is no longer useless, it is insurmountable level .  Hierarchy Tree Rules Maybe you would think that a sibling node in the DOM structure would carry it out to compare and determine the hierarchy, but it's not. We think that position is set to relative, absolute or fixed, and z-index the nodes that are assigned by integers, is placed in a hierarchy tree that is not the same as DOM, and determines the level of display in the hierarchical tree by contrasting z-index. The above example should be shown in the hierarchy tree. Although A-1 ( z-index:0) has a value greater than B-1 ( z-index:1) Small, but because in the hierarchy tree A ( z-index:2) and B-1 at one level, while A's value is larger than B-1, according to the parent rule, A-1 is displayed in front of B-1. Participation rules mentioned earlier in rule 2 suggest that as long as the node's position attribute is relative, absolute or fixed, you can participate in the hierarchy comparison, in fact, not accurate. If all nodes have position:relative defined, and Z-index is set to an integer value, the hierarchy of the child nodes is determined by the parent rule. Example A, B-1, c as the parent node, z-index the same value, according to the order rule, C in B -Before 1, B-1 before A; Also based on the parent rule, regardless of the z-index value of the child node, c-1-1-1 before B-1-1, b-1-1 before A-1. If we remove all of the parent node's z-index attributes, something weird happens. IE6 and IE7 browsers display the same effect, while the Web browser's child nodes are no longer from the parent, but are determined by their own z-index. Depending on the default rule, there is a difference between 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. Set position without z-in Dex's nodes do not participate in hierarchical tree comparisons, but they are also hierarchical compared to sibling nodes in the DOM. 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 will appear in front of the B-1; And according to the order rule, C is also shown in front of A. In IE6 and IE7, because A and c-1-1 set the position:relative, and the default value of Z-index is 0, so it also participates in the hierarchy tree comparison, so it has the following effect.

Turn from: CSS Z-index the use of properties and the concept of a hierarchical tree

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