成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

深入 css z-index 屬性

godlong_X / 3294人閱讀

摘要：不能修改結(jié)構(gòu)不能加入或修改任何元素的不能加入或修改任何屬性目標(biāo)要完成下面這樣，先不要偷看解答自己想一想。當(dāng)我們沒有和屬性的時(shí)候，規(guī)則非常簡(jiǎn)單，就是按照文件中撰寫的先後順序。有設(shè)定且為，設(shè)定小於和其他等屬性也在此列。

說來汗顏，一直以來對(duì)於 css 常常是不求勝解。直到自己需要打造自己的輪子才發(fā)現(xiàn)對(duì) z-index 完全不熟悉。
關(guān)於 z-index 的問題其實(shí)非常少人完全明白它到底是怎麼運(yùn)作的。事實(shí)上這並不複雜，不過如果你不曾花些時(shí)間閱讀規(guī)範(fàn)可能你不曾察覺一些重要的觀念。

問題

在下面的 HTML 中我們有三個(gè)

元素，每一個(gè)元素包含著一個(gè) ，我們給 設(shè)定背景色 - 分別是綠, 紅, 藍(lán)。
每個(gè) 同時(shí)也設(shè)定 absolute 位置設(shè)在文件的左上角。約略的重疊在其他 這樣我們就可以觀察整個(gè)堆疊的行為。

第一個(gè) 的 z-index: 1，其他兩者不設(shè)。

下面是我們的程式碼：

div
  span class="red" RED
div
  span class="green" GREEN
div
  span class="blue" BLUE
.red, .green, .blue {
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
  position: absolute;
}

.red {
  z-index: 1;
  background: red;
  top: 20px;
  left: 20px;
}

.green {
  background: green;
  top: 40px;
  left: 40px;
}

.blue {
  background: blue;
  top: 60px;
  left: 60px;
}

範(fàn)例

這邊有個(gè)小小的挑戰(zhàn): 試看看能不能把紅色區(qū)塊的 排到藍(lán)色和綠色 的後面，但要遵循下面的規(guī)則。

不能修改 HTML 結(jié)構(gòu)

不能加入或修改任何元素的 z-index

不能加入或修改任何 position 屬性

目標(biāo)要完成下面這樣，先不要偷看解答自己想一想。

範(fàn)例

解答

這個(gè)解決方案是透過加入一個(gè)小於 1的 opacity 到紅色 的爸爸元素即

上面是透過加上

div:first-child {
  opacity: .99;
}

如果你現(xiàn)在跟我當(dāng)初一樣驚訝，不相信為什麼加了 opacity: .99 可以改變?cè)氐捻樞?。希望剩下的文章可以幫助你更清楚這些機(jī)制。

呈現(xiàn)堆疊的順序

z-index 看起來非常簡(jiǎn)單，至少在我第一次看到這個(gè)屬性的時(shí)候，我只知道越大的 z-index 應(yīng)該要被排在最前面(上面)，對(duì)吧？
但事實(shí)上事情沒那麼單純?？雌饋砗芎?jiǎn)單以至於大部分的開發(fā)者都沒有花時(shí)間去理解它的規(guī)則。

在 HTML 中的任何元素可以被調(diào)整到其他元素的前面或後面，這也就是我們所知的堆疊順序(stacking order)。這樣順序的規(guī)則被很明確的定義在規(guī)範(fàn)上，但如同我剛剛提到的，大多的開發(fā)者沒有認(rèn)真的完全參透。

當(dāng)我們沒有 z-index 和 position 屬性的時(shí)候，規(guī)則非常簡(jiǎn)單，就是按照文件中 tag 撰寫的先後順序。好吧實(shí)際上還是有點(diǎn)複雜，請(qǐng)參考規(guī)範(fàn)說明。不過呢，只要我們不使用負(fù)的 margin來覆蓋 inline 的元素，大致上我們不會(huì)遇到這些極端的情況。

當(dāng)我們開始加入 position，任何被設(shè)定 position 的元素和它們的後代會(huì)呈現(xiàn)在其他沒有設(shè)定 position 的元素之前，這裡說的設(shè)定 position 指的是除了設(shè)為 static 以外得值例如: relative, absolute。

最後當(dāng)我們也加入 z-index ，事情就變得更複雜了一點(diǎn)。很自然的我們會(huì)認(rèn)為具備較大 z-index 的元素會(huì)排在前面，有 z-index 也會(huì)蓋在沒有的前面。
但是實(shí)際上卻沒那麼簡(jiǎn)單，首先是 z-index 只對(duì)那些有設(shè)定 position 的元素有效。如果你試著把 z-index 設(shè)在 static 的元素上，那麼什麼事都不會(huì)發(fā)生。第二點(diǎn) z-index 會(huì)建立一個(gè) stacking context ，此時(shí)就是進(jìn)入重點(diǎn)的地方了。

Stacking Context

當(dāng)我們有一個(gè)

包著一群
元素時(shí)，它們的堆疊順序通常會(huì)一起被移動(dòng)(從父原則)，這整個(gè)群組的順序就是 stacking context，要完全理解 stacking context 我們就必須要參透 z-index 是怎麼排序 stacking order。

每一個(gè) stacking context 有一個(gè)唯一的 HTML 元素當(dāng)作其根元素，當(dāng)一個(gè)新的 stacking context 或者我們翻作堆疊環(huán)境被建立在一個(gè)元素上時(shí)，這個(gè)堆疊環(huán)境就會(huì)控管它內(nèi)部的子元素的順序 stacking order，意思是如果其中一個(gè)元素在這個(gè)堆疊環(huán)境中順序被排在最底下，那它就完全沒機(jī)會(huì)出現(xiàn)在另外一個(gè)元素排位較高的堆疊環(huán)境前面，就算他的 z-index 設(shè)成 9999999。

從另外一個(gè)角度來說，每一個(gè)被設(shè)定 position 的元素除了自己的 stacking order 另外如果內(nèi)部還有子元素，就會(huì)有一個(gè) stacking context 來管制底下的元素。

要建立一個(gè)堆疊環(huán)境 stacking context有下面三者方式，只要使用其一即可：

當(dāng)元素是網(wǎng)頁文件的根元素通常就是

當(dāng)元素被設(shè)定 position 除了 static 以外的值，然後 z-index 設(shè)定為除了 auto 以外的值

當(dāng)元素設(shè)定了 opacity 且值小於 1

上面提到的三種方式中，前兩者大部分的開發(fā)者都知道，即使他們不懂原理但還是會(huì)使用。第三種方式除了 w3c 規(guī)範(fàn)，大多開發(fā)者都不曾提到。

此外除了 opacity 另外一些新的屬性像是 transforms, filters, css-regions, paged media 等等都會(huì)產(chǎn)生 stacking context。
還有當(dāng) css 屬性需要在超出螢?zāi)坏牡胤戒秩荆矔?huì)產(chǎn)生一個(gè) stacking context。

如何決定元素在堆疊環(huán)境中的位置

實(shí)際上在 global stacking 決定整個(gè)頁面元素的排序包含 borders, background, 文字是極度複雜的而且已經(jīng)超出這篇文章的範(fàn)圍。
不過針對(duì)大多數(shù)的應(yīng)用，對(duì)於排序有些基本的認(rèn)識(shí)有助於往後的開發(fā)工作，所以讓我們來一步步拆解說明

在單一堆疊環(huán)境 Stacking Context 中的順序

在單一的堆疊環(huán)境從最下面(後)到上面(前)規(guī)則如下

執(zhí)行堆疊的根元素。

有設(shè)定 position 且 z-index 為負(fù)數(shù)的元素和它們的子元素，-1 在 -2 前面。

沒有設(shè)定 position 的元素，一般元素。

有設(shè)定 position 且 z-index 為 auto，設(shè)定 opacity 小於 1 和其他 transforms 等屬性也在此列。

有設(shè)定 position 且 z-index 為正數(shù)。

都一樣的時(shí)候就比文件中程式碼出現(xiàn)的先後順序，後出現(xiàn)的蓋在上面。

注意：2 號(hào)情況在一個(gè) stacking context 會(huì)被排在最下面(後面)，意思是他會(huì)躲在其他元素後面。也因此這讓元素藏在其父元素後面變成了可能。
你可能會(huì)疑惑上面那句話，試想如下面這樣的結(jié)構(gòu)

div[z-index: 1, position: relative]  /<- 這邊建立了 stacking context
  div[class: "parent"]
    div[z-index: -2, position: absolute] /<- 這個(gè)元素跟 parent 在同一層 stacking context 所以就躲起來了
全域的堆疊排序 Global Stacking Order

清楚的了解一個(gè)堆疊環(huán)境 stacking contetxt 是如何形成的以及掌握如何排序的原則後，我們不難理解一個(gè)元素在全域的堆疊環(huán)境下會(huì)如何呈現(xiàn)排序，就是把 作為我們最上層的 stacking context。接著原則就一樣。

避免搞死自己的關(guān)鍵點(diǎn)就是每當(dāng)我們建立了一個(gè)新的堆疊環(huán)境我們要很清楚這是為了什麼。當(dāng)你把 z-index 設(shè)得很大但卻沒有產(chǎn)生變化，往上層元素看看，可能就會(huì)發(fā)現(xiàn)已經(jīng)有人具備了 stacking context 的條件了。

總結(jié)

回到我們一開始的問題，這次我們就直接透過 html 結(jié)構(gòu)來指出這些順序吧

當(dāng)我們?cè)诘谝粋€(gè) div 加上 opacity 後，由下至上的排序應(yīng)該是

本來是 6 的 span 因?yàn)樯蠈拥?div 也具備 stacking context 但是順序比下面 4, 5 的 span 小。自己又因?yàn)?b>從父原則導(dǎo)致順序被往前推了。
希望這篇文章能讓你對(duì)於 z-index 有能更加清楚。

資源

w3c 規(guī)範(fàn)

詳細(xì)說明 - 中文

MDN stacking context

概覽 z-index

No one told you about z-index

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115148.html

相關(guān)文章

  • [譯] 學(xué)習(xí) CSS clip-path 屬性

    摘要：整體來說網(wǎng)頁主要是由矩形所構(gòu)成的，另一方面印刷品則具備相對(duì)多樣性。即便我們?cè)O(shè)定的元素不再是矩形，但周圍的元素排列方式仍然維持原本矩形的佈局。為了達(dá)成周圍的元素跟著裁切的形狀，我們可以使用屬性。周圍的元素仍需要靠來修正。 整體來說網(wǎng)頁主要是由矩形所構(gòu)成的，另一方面印刷品則具備相對(duì)多樣性。造成這樣差異的原因有很多，不過其中一個(gè)即是缺少合適的工具。 這篇文章主要會(huì)介紹 clip-path 這...

    yuanxin 評(píng)論0 收藏0

  • [譯] Houdini: 你還沒聽說！這可能是 CSS 下一件最令人興奮的大事

    摘要：接下來我們將會(huì)更具體的說明是什麼東西和這傢伙會(huì)怎麼解決這些問題，並且列出目前開發(fā)中一些令人興奮的功能。這個(gè)功能甚至還沒有一個(gè)瀏覽器支援。完整的清單請(qǐng)查閱目前還未被寫入規(guī)範(fàn)，意思是這邊提到任何內(nèi)容極有可能會(huì)改變。 譯者：其實(shí)...我想說這可能是最令我感到興奮..但又害怕頭痛的功能... 附上原文連結(jié) 你曾經(jīng)想要使用某個(gè) CSS 的新功能，但是最後卻因?yàn)檫@個(gè)功能瀏覽器還未全面支援而放棄了嗎...

    bergwhite 評(píng)論0 收藏0

  • [技術(shù)分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實(shí)做（上）

    摘要：註在這篇文章中我們只考慮和為等比例的情況。最後實(shí)做出來的功能會(huì)像這樣子實(shí)做拖曳與縮放瞭解中的和在的世界中，空間的概念可以分成和兩個(gè)部分。實(shí)際感受的效果在她所撰寫文章中提供了非常好的實(shí)做案例。這個(gè)座標(biāo)系統(tǒng)是相對(duì)固定的。 理解 SVG 中的 Viewport 和 ViewBox - 實(shí)做縮放（zoom）和拖曳（drag）效果 本文章同步刊載於 PJCHENder 前端網(wǎng)頁資源站 不同於以往...

    Leo_chen 評(píng)論0 收藏0

  • [技術(shù)分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實(shí)做（上）

    摘要：註在這篇文章中我們只考慮和為等比例的情況。最後實(shí)做出來的功能會(huì)像這樣子實(shí)做拖曳與縮放瞭解中的和在的世界中，空間的概念可以分成和兩個(gè)部分。實(shí)際感受的效果在她所撰寫文章中提供了非常好的實(shí)做案例。這個(gè)座標(biāo)系統(tǒng)是相對(duì)固定的。 理解 SVG 中的 Viewport 和 ViewBox - 實(shí)做縮放（zoom）和拖曳（drag）效果 本文章同步刊載於 PJCHENder 前端網(wǎng)頁資源站 不同於以往...

    AJie 評(píng)論0 收藏0

  • CSS常見問題小結(jié)

    摘要：常見問題小結(jié)一行內(nèi)樣式內(nèi)聯(lián)樣式外部樣式行內(nèi)樣式代碼寫在具體網(wǎng)頁中的一個(gè)元素內(nèi)比如一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋在制作頁面的時(shí)候需要為很多的標(biāo)簽設(shè)置屬性，所以會(huì)導(dǎo)致頁面不夠純凈，文件體積過大不利于，后期維護(hù)成本高。 CSS常見問題小結(jié) 一、行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式 行內(nèi)樣式：代碼寫在具體網(wǎng)頁中的一個(gè)元素內(nèi)；比如： 一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋 在制作頁面的時(shí)...

    ivyzhang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<