CSS 中 position:absolute 與 z-index 對層次結構影響

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