CSS 中 position:absolute 與 z-index 對層次結構影響
阿新 • • 發佈：2019-02-05
不使用 position
這種情況下每一層都遵循 HTML 定位規則,其中的 left,right,top,bottom 定位資訊對其無效,z-index 也不會發揮作用因為沒有層疊的情況出現.
2. 使用 absolute
如兩個絕對定位物件的 z-index 屬性具有同樣的值,那麼將依據它們在HTML文件中宣告的順序層疊.
2.1 未使用 z-index
這種情況下,依據它們在HTML文件中宣告的順序層疊,因為 z-index 在未設定的情況下,預設為 0 .
<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:位於最底層 002:位於中間層 003:位於最高層
2.2 使用 z-index
z-index 為無單位的整數值,可為負數.按照數值的大小排列,數值越大,越在外層.
<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:位於中間層 002:位於最高層 003:位於最底層
2.3 父子元素
對於父子元素,子元素的從屬於父元素的層次,子元素在父層的上面
<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:位於中間層 002:位於最高層 003:位於最底層
3. 混合使用 absolute
對於沒有設定 position:absolute 屬性的元素 不管 z-index 設定多少都為 0, 但低於 position:absolute 中 z-index:0 的元素
<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:位於最高層 002:位於中間層 003:位於最底層
這種情況下每一層都遵循 HTML 定位規則,其中的 left,right,top,bottom 定位資訊對其無效,z-index 也不會發揮作用因為沒有層疊的情況出現.
2. 使用 absolute
如兩個絕對定位物件的 z-index 屬性具有同樣的值,那麼將依據它們在HTML文件中宣告的順序層疊.
2.1 未使用 z-index
這種情況下,依據它們在HTML文件中宣告的順序層疊,因為 z-index 在未設定的情況下,預設為 0 .
<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:位於最底層 002:位於中間層 003:位於最高層
2.2 使用 z-index
z-index 為無單位的整數值,可為負數.按照數值的大小排列,數值越大,越在外層.
<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:位於中間層 002:位於最高層 003:位於最底層
2.3 父子元素
對於父子元素,子元素的從屬於父元素的層次,子元素在父層的上面
<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:位於中間層 002:位於最高層 003:位於最底層
3. 混合使用 absolute
對於沒有設定 position:absolute 屬性的元素 不管 z-index 設定多少都為 0, 但低於 position:absolute 中 z-index:0 的元素
<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:位於最高層 002:位於中間層 003:位於最底層