The influence of Position:absolute and Z-index on hierarchy structure in CSS

Css

Do not use position
In this case, each layer follows the HTML positioning rule, where the Left,right,top,bottom positioning information is not valid and Z-index does not work because there is no cascade.

2. Use of absolute

If the Z-index properties of two absolute anchored objects have the same value, they are stacked according to the order in which they are declared in the HTML document.

2.1 not used Z-index

In this case, they cascade according to the order they are declared in the HTML document, because the default is 0 if Z-index is not set.

<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: At the bottom 002: At the middle tier 003: at the highest level

2.2 using Z-index

Z-index is an integer value that has no units, and can be negative. The larger the number, the higher the value, the more the outer layer.

<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: In the middle tier 002: At the top 003: at the lowest level

2.3 Parent-child elements

For a parent-child element, the child element is subordinate to the parent element's hierarchy, and the child element is above the parent layer

<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> <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>

001: In the middle tier 002: At the top 003: at the lowest level

3. Mixed use of absolute

For elements that do not have the Position:absolute property set, regardless of the Z-index setting, the number is 0, but below the Position:absolute z-index:0 of elements

<div id = "001" style= "top:30"; left:30; width:100px; height:50px; border:1px solid #999; Background:green; Position:absolute; " >001</div> <div id = "002" style= "top:20"; left:40; width:100px; height:50px; border:1px solid #999; Background:red;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:-1 ">003</div>

001: At the top 002: In the middle tier 003: at the lowest level