Position: absolute and z-index in CSS affect the hierarchy

Do not use position
In this case, each layer follows the HTML positioning rules. The left, right, top, and bottom positioning information is invalid, and the z-index will not work because there is no cascade.
2. Use absolute
If the z-index attribute of two absolute positioning objects has the same value, it will be stacked according to the order they are declared in the HTML document.
2.1 z-index not used
In this case, it is layered based on the order they are declared in the HTML document, because the default value of z-index is 0 if not set.

The code is as follows:

Copy code

<Div id = "001" style = "top: 10; left: 30; width: 100px; height: 50px; border: 1px solid #999; background: green; position: absolute; "> 001 </div> <div id =" 002 "style =" top: 40; left: 40; width: 100px; height: 50px; border: 1px solid #999; background: red; position: absolute; "> 002 </div> <div id =" 003 "style =" top: 80; left: 50; width: 100px; height: 50px; border: 1px solid #999; background: yellow; position: absolute; "> 003 </div>

001: Located at the bottom layer 002: Located at the middle layer 003: Located at the top layer
2.2 use z-index
Z-index is an integer without unit and can be negative. It is arranged according to the value size. The larger the value, the more it is in the outer layer.

The code is as follows:

Copy code

<Div id = "001" style = "top: 10; left: 30; width: 100px; height: 50px; border: 1px solid #999; background: green; position: absolute; "> 001 </div> <div id =" 002 "style =" top: 30; left: 40; width: 100px; height: 50px; border: 1px solid #999; background: red; position: absolute; z-index: 1; "> 002 </div> <div id =" 003 "style =" top: 50; left: 20; width: 100px; height: 50px; border: 1px solid #999; background: yellow; position: absolute; z-index:-1; "> 003 </div>

001: Located in intermediate layer 002: Located at the highest level 003: Located at the lowest level
2.3 parent and child elements
For parent and child elements, the child element belongs to the parent element level, and the child element is above the parent layer.

The code is as follows:

Copy code

<Div id = "001" style = "width: 100px; height: 50px; border: 1px solid #999; background: green; position: absolute; z-index: 1 "> 001 <div id =" 002 "style =" top: 20; left: 40; width: 100px; height: 50px; border: 1px solid #999; background: red; position: absolute; z-index:-1 "> 002 </div> <div id =" 003 "style =" top: 20; left: 40; width: 100px; height: 50px; border: 1px solid #999; background: yellow; position: absolute; z-index: 0 "> 003 </div>