css中z-index: 0和z-index: auto的區別

  發布時間:2021-08-11 16:49:37   作者:有缸今天有耳朵   我要評論
本文主要介紹了css中z-index: 0和z-index: auto的區別,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

最近在學習層疊上下文,學習的過程中對z-index為0和為auto有什么區別產生了疑問,于是去百度查了一下資料。發現了一些問題,結合自己的實踐(實驗?)整理出了這篇筆記。

勘誤

查資料時發現有一種說法是z-index為0是會創建新的層疊上下文,0會在auto上面。后半句話是錯誤的,z-index: 0與z-index不設置,也就是z-index: auto在同一層級內沒有高低之分,文檔流中后出現的會覆蓋先出現的。

設置z-index: 0或z-index: auto,文檔流中后出現的會覆蓋先出現的。

來做一些小實驗

<!DOCTYPE html>
<html>
<head>
  <title>z-index為0或auto</title>
  <style>
    .red,
    .blue{
      width: 200px;
      height: 200px;
    }

    .red {
      position: absolute;
      z-index: 0;
      top: 100px;
      left: 100px;
      background: #FF0000;
    }
    .blue {
      position: absolute;
      z-index: auto;
      top: 40px;
      left: 40px;
      background: #0000FF;
    }
  </style>
</head>

<body>
  <div class="red">
    index-0
  </div>
  <div class="blue">index-auto</div>
</body>
</html>

這段代碼的結果是:

可以看到藍色元素覆蓋在了紅色元素上方,交換紅藍元素塊在文檔中的順序為

<div class="blue">index-auto</div>
<div class="red">
  index-0
</div>

可以得到

這時紅色元素又覆蓋在藍色元素之上。可以得出z-index取值0或auto對元素在層疊上下文中的排列順序并沒有影響。
除次之外,我還在MDN文檔中看到了這樣一句話:

當沒有指定z-index的時候, 所有元素都在會被渲染在默認層(0層)。

也就是auto和0是同一層。
再來給上面的代碼在藍色塊后面新增一個綠色的塊。

<div class="green">不設置z-index</div>
 
.green {
  position: absolute;
  top: 160px;
  left: 160px;
  background: greenyellow;
}

這時頁面長這樣。

綠色沒有設置z-index值。一般瀏覽器position不為static,且不設置z-index時,z-index為auto,IE6/7下z-index為0。
綠色作為最后出現的元素,覆蓋了藍色和紅色兩個元素。

z-index: 0創建了層疊上下文

現在我們來驗證紅色元素因為z-index:0產生了層疊上下文。在紅色元素里添加測試元素

<div class="test"></div>
 
.test {
  width: 140px;
  height: 140px;
  position: absolute;
  right: 0px;
  top: 0px;
  background: grey;
  z-index: 10;
}

這時候頁面長這樣

灰色測試塊被藍色和綠色塊所覆蓋。
顯然易見,即使test元素的z-index為10,也無法展示在層疊上下文的最上層。因為test隸屬于它的父元素red創建的層疊上下文。當一個元素產生了層疊上下文,其子級層疊上下文的z-index值只在父級中才有意義。所有灰色塊的z-index只在紅色塊里生效。

z-index: auto不創建層疊上下文

那么現在將這個測試元素放在藍色塊里試一試呢?(藍色元素的z-index值為auto)

可看到灰色元素展示在所有元素的最上層,z-index值生效了!這個時候test元素隸屬于根元素創建的層疊上下文(在層疊上下文的層次結構中,沒有創建層疊上下文的元素同其父級處于一個層疊上下文。藍色塊沒有創建層疊上下文,與其父元素也就是根元素是同一個層疊上下文)。紅色元素也屬于根元素創建的層疊上下文,但是紅色元素z-index為0,0小于10,因此灰色塊在上。

總結

  • 不設置z-index值時,默認是auto。默認層也就是0層。
  • z-index: 0 與沒有定義 z-index 也就是z-index: auto在同一層級內沒有高低之分,文檔流中后出現的會覆蓋先出現的。
  • z-index: 0 會創建層疊上下文z-index: auto不會創建層疊上下文。

到此這篇關于css中z-index: 0和z-index: auto的區別 的文章就介紹到這了,更多相關z-index: 0和z-index: auto 區別 內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家! 

相關文章

最新評論

精品国内自产拍在线观看