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

  002

  003

  001:位於最底層
  002:位於中介層
  003:位於最高層

2.2 使用 z-index
  
  z-index 為無單位的整數值,可為負數.按照數值的大小排列,數值越大,越在外層.
  001

  002

  003

  001:位於中介層
  002:位於最高層
  003:位於最底層

2.3 父子項目

  對於父子項目,子項目的從屬於父元素的層次,子項目在父層的上面

  001
    002

  

  003

  001:位於中介層
  002:位於最高層
  003:位於最底層

  
3. 混合使用 absolute

  對於沒有設定 position:absolute 屬性的元素 不管 z-index 設定多少都為 0, 但低於 position:absolute 中 z-index:0 的元素
  001

  002

  003

  001:位於最高層
  002:位於中介層
  003:位於最底層