欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css中z-index: 0和z-index: auto的區(qū)別

  發(fā)布時(shí)間：2021-08-11 16:49:37   作者：有缸今天有耳朵   我要評(píng)論
本文主要介紹了css中z-index: 0和z-index: auto的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在學(xué)習(xí)層疊上下文，學(xué)習(xí)的過(guò)程中對(duì)z-index為0和為auto有什么區(qū)別產(chǎn)生了疑問(wèn)，于是去百度查了一下資料。發(fā)現(xiàn)了一些問(wèn)題，結(jié)合自己的實(shí)踐（實(shí)驗(yàn)？）整理出了這篇筆記。

勘誤

查資料時(shí)發(fā)現(xiàn)有一種說(shuō)法是z-index為0是會(huì)創(chuàng)建新的層疊上下文，0會(huì)在auto上面。后半句話(huà)是錯(cuò)誤的，z-index: 0與z-index不設(shè)置，也就是z-index: auto在同一層級(jí)內(nèi)沒(méi)有高低之分，文檔流中后出現(xiàn)的會(huì)覆蓋先出現(xiàn)的。

設(shè)置z-index: 0或z-index: auto，文檔流中后出現(xiàn)的會(huì)覆蓋先出現(xiàn)的。

來(lái)做一些小實(shí)驗(yàn)

<!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>

這段代碼的結(jié)果是:

可以看到藍(lán)色元素覆蓋在了紅色元素上方，交換紅藍(lán)元素塊在文檔中的順序?yàn)?/p> 

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

可以得到

這時(shí)紅色元素又覆蓋在藍(lán)色元素之上?？梢缘贸鰖-index取值0或auto對(duì)元素在層疊上下文中的排列順序并沒(méi)有影響。
除次之外，我還在MDN文檔中看到了這樣一句話(huà)：

當(dāng)沒(méi)有指定z-index的時(shí)候， 所有元素都在會(huì)被渲染在默認(rèn)層(0層)。

也就是auto和0是同一層。
再來(lái)給上面的代碼在藍(lán)色塊后面新增一個(gè)綠色的塊。

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

這時(shí)頁(yè)面長(zhǎng)這樣。

綠色沒(méi)有設(shè)置z-index值。一般瀏覽器position不為static，且不設(shè)置z-index時(shí)，z-index為auto，IE6/7下z-index為0。
綠色作為最后出現(xiàn)的元素，覆蓋了藍(lán)色和紅色兩個(gè)元素。

z-index: 0創(chuàng)建了層疊上下文

現(xiàn)在我們來(lái)驗(yàn)證紅色元素因?yàn)閦-index:0產(chǎn)生了層疊上下文。在紅色元素里添加測(cè)試元素

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

這時(shí)候頁(yè)面長(zhǎng)這樣

灰色測(cè)試塊被藍(lán)色和綠色塊所覆蓋。
顯然易見(jiàn)，即使test元素的z-index為10，也無(wú)法展示在層疊上下文的最上層。因?yàn)閠est隸屬于它的父元素red創(chuàng)建的層疊上下文。當(dāng)一個(gè)元素產(chǎn)生了層疊上下文，其子級(jí)層疊上下文的z-index值只在父級(jí)中才有意義。所有灰色塊的z-index只在紅色塊里生效。

z-index: auto不創(chuàng)建層疊上下文

那么現(xiàn)在將這個(gè)測(cè)試元素放在藍(lán)色塊里試一試呢？(藍(lán)色元素的z-index值為auto)

可看到灰色元素展示在所有元素的最上層，z-index值生效了！這個(gè)時(shí)候test元素隸屬于根元素創(chuàng)建的層疊上下文（在層疊上下文的層次結(jié)構(gòu)中，沒(méi)有創(chuàng)建層疊上下文的元素同其父級(jí)處于一個(gè)層疊上下文。藍(lán)色塊沒(méi)有創(chuàng)建層疊上下文，與其父元素也就是根元素是同一個(gè)層疊上下文）。紅色元素也屬于根元素創(chuàng)建的層疊上下文，但是紅色元素z-index為0，0小于10，因此灰色塊在上。

總結(jié)

  • 不設(shè)置z-index值時(shí)，默認(rèn)是auto。默認(rèn)層也就是0層。
  • z-index: 0 與沒(méi)有定義 z-index 也就是z-index: auto在同一層級(jí)內(nèi)沒(méi)有高低之分，文檔流中后出現(xiàn)的會(huì)覆蓋先出現(xiàn)的。
  • z-index: 0 會(huì)創(chuàng)建層疊上下文z-index: auto不會(huì)創(chuàng)建層疊上下文。

到此這篇關(guān)于css中z-index: 0和z-index: auto的區(qū)別 的文章就介紹到這了,更多相關(guān)z-index: 0和z-index: auto 區(qū)別 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！ 

相關(guān)文章

最新評(píng)論