CSS 中 position:absolute 與 z-index 對階層影響

css

不使用 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:位於最底層