CSS z-index attribute usage and hierarchy tree concept, cssz-index

CSS z-index attribute usage and hierarchy tree concept, cssz-index
 CSSInZ-index attributesIt is used to set the stacking order of nodes. nodes with higher stacking order will be displayed in front of nodes with lower stacking order. This is our general understanding of the z-index attribute. at the same time, we are always unable to figure out the stack sequence. Setting the value of z-index to a large value may not display the node at the beginning. this article will use some examples to analyze the use of z-index, and bring you z-indexHierarchy TreeConcept. if the order rule does not set the position attribute for the node, the node located after the Document Stream will overwrite the previous node. if the position is set to static in the positioning rule, the node located behind the Document Stream will still overwrite the floating of the previous node, soposition:staticDoes not affect the coverage relationship of nodes. if you set position to relative (relative positioning), absolute (absolute positioning), or fixed (fixed positioning), such a node will overwrite a node that does not set the position attribute or the attribute value is static, it indicates that the former is higher than the latter's default level. without the z-index attribute interference, we can make more complex structures based on these sequential rules and positioning rules. here we do not set the position for both A and B, but for the child node A-1 of A setposition:relative. According to the ordered rule, B will overwrite A, and according to the positioning rule a' will overwrite B. the position attribute is not required for participating in the rule, and the z-index attribute is added to the node. z-index does not work on nodes. w3C's description of the z-index attribute indicates that the z-index attribute takes effect only when the position attribute of the node is relative, absolute or fixed. default rule if all nodes define position: relative. nodes with zero z-index and those with no z-index defined are not in the same level. However, nodes with a z-index greater than or equal to 1 will overwrite those with no z-index defined; nodes with Negative z-index values will be overwritten by nodes with no z-index defined. after checking, we also found that when the position is set to relative, absolute or fixed but not z-index, IE8 or above and W3C browsers (collectively referred to as W3C browsers) the default value of z-index is auto, but IE6 and IE7 are 0. from the parent rule, if both A and B define position: relative, the z-index of node A is larger than that of Node B, then the child node of node A Must overwrite the child node of Node B. if position: relative is defined for all nodes, the z-index of node A is as big as that of Node B, but because of the sequence rules, Node B overwrites node. even if the z-index value of the subnode of A is greater than that of the subnode of B, the subnode of B will overwrite the subnode of. many people set the z-index to a large value, and the z-index to 9999 or something. If the influence of the parent node is not taken into account, it is useless to set it to a large value, which is an insurmountable level. hierarchy Tree rules may make you think that the sibling nodes in the DOM structure will compare and determine the hierarchy. in our opinion, the position is set to relative, absolute, or fixed at the same time, and the z-index is placed in a different hierarchy tree than the DOM after the integer value assignment, in the hierarchy tree, the displayed hierarchy is determined by comparing the z-index values. if the above example is represented by a hierarchy tree, it should be shown in. although the A-1 (z-index:0) Value than B-1 (z-index:1) Small, but because in the hierarchy tree (z-index:2) And the B-1 at A level, while the value of A is greater than the B-1, according to the parent rule, the A-1 is displayed before the B-1. the Participation Rule mentioned earlier in Rule 2 considers that as long as the position attribute of a node is relative, absolute, or fixed, it can be involved in hierarchical comparison. In fact, this is not accurate. if position: relative is defined for all nodes and z-index is set to an integer, the level of the parent node determines the level of the child node. in the example A, B-1, C as the parent node, the value of z-index is the same, according to the order rule, C before the B-1 before A; and according to the parent rule, no matter what the z-index value of the child node is, the C-1-1-1 before the B-1-1 before the B-1-1. if we remove the z-index attribute of all parent nodes, something strange happens. in IE6 and IE7 browsers, the display effect remains unchanged, while in W3C browsers, the child nodes are no longer from the parent node, but are determined based on their own z-index levels. according to the default rule, elements in IE6/IE7 and W3C browsers have different default values of z-index. we believe that when position is set to relative, absolute, or fixed and z-index is assigned an integer, the node is placed in the hierarchy tree, while z-index is the default value, only hierarchical comparison between document sibling nodes. in W3C browsers, the z-indexes of A, B-1, and C-1-1 are both auto and do not participate in hierarchical comparison. in IE6 and IE7, the default value of z-index is 0, so it also participates in hierarchical comparison. although a node with position and no z-index is not involved in the hierarchy tree comparison, it also performs hierarchical comparison with the sibling node in the DOM. let's transform the previous example. After the position attribute of the B-1 is deleted, the W3C browser is shown. according to the positioning rules, A and C are displayed in front of the B-1, and according to the order rules, C is displayed in front of. in IE6 and IE7, because A and C-1-1 setposition:relativeAnd the default value of z-index is 0, so it also participates in the hierarchy tree comparison.