Css z-index attribute, cssz-index

Css z-index attribute, cssz-index

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

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.

 

This week, our team made an internal technical sharing. Pumpkin millet porridge shared his understanding of CSS z-index and introduced the hierarchical tree concept. this sharing site worked very well, so I also moved the z-index and Hierarchy Tree topics to the blog to talk about it.

This article describes the rules that affect the display of multiple nodes. All the examples used are listed in the example of the impact of the position attribute and the z-index attribute on the page node level.

Directory

• Sequence rules
• Locating rules
• Participation rules
• Default rule
• From parent rule
• Hierarchy Tree rules
• Participation Rule 2
• Summary

Sequence rules

If you do not set the position attribute for the node, the node located after the Document Stream will overwrite the previous node.

<div id="a">A</div><div id="b">B</div>

Locating rules

If the position is set to static, the node located after the Document Stream will still overwrite the node floating, soposition:staticDoes not affect the coverage relationship of nodes.

<Div id = "a"> <Div id = "a"> <Div id = "a"> <div id = "A-1"> participation rules We tried not to use the position attribute, but added the z-index attribute to the node. We found that z-index did not work for the node. <Div id = "a"> <Div id = "a"> 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. <Div id = "a"> from parent rule If position: relative is defined for node A and Node B, the z-index of node A is larger than that of Node B, then the sub-node of node A Must overwrite the sub-node of Node B. <Div id = "a"> <Div id = "a"> hierarchical tree rules Maybe you will think that the sibling node in the DOM structure will be pulled out for comparison and determine the level. In fact, it is not. <Div id = "a"> Rule 2 As long as the position attribute of the node is relative, absolute, or fixed, the participation rules mentioned above can be involved in hierarchical comparison, which 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. <Div id = "a"> <Div id = "a"> <Div id = "a"> conclusion The browser node display level is A laborious task. Today, you think Block A will be placed on top forever, but tomorrow, due to demand changes, elements B will suddenly need to be placed on top. A layer-by-layer stacked up, one day I looked back and found that many blocks are staggered together, and their values are bigger than one, so I don't know how to figure it out. I think it is best to figure out the relationship between position, z-index and level before you work in a proper way to avoid endless troubles. In addition, do not use JavaScript to calculate the z-index, and set the z-index of a node to the highest level in all nodes. Because the length is too long, this article is only discussed from the perspective of node attributes, and does not involve special page nodes such as select and iframe. If you have the opportunity to share it with you next time.