国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

深入 css z-index 屬性

godlong_X / 3268人閱讀

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

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

問題

在下面的 HTML 中我們有三個

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

第一個 的 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)例

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

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

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

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

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

範(fàn)例

解答

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

上面是透過加上

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

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

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

z-index 看起來非常簡單，至少在我第一次看到這個屬性的時候，我只知道越大的 z-index 應(yīng)該要被排在最前面(上面)，對吧？
但事實(shí)上事情沒那麼單純?？雌饋砗芎唵我灾领洞蟛糠值拈_發(fā)者都沒有花時間去理解它的規(guī)則。

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

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

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

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

Stacking Context

當(dāng)我們有一個

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

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

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

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

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

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

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

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

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

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

實(shí)際上在 global stacking 決定整個頁面元素的排序包含 borders, background, 文字是極度複雜的而且已經(jīng)超出這篇文章的範(fàn)圍。
不過針對大多數(shù)的應(yīng)用，對於排序有些基本的認(rèn)識有助於往後的開發(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ù)。

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

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

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

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

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

總結(jié)

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

當(dāng)我們在第一個 div 加上 opacity 後，由下至上的排序應(yīng)該是

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

資源

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

詳細(xì)說明 - 中文

MDN stacking context

概覽 z-index

No one told you about z-index

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115148.html

相關(guān)文章

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

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

    yuanxin 評論0 收藏0

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

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

    bergwhite 評論0 收藏0

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

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

    Leo_chen 評論0 收藏0

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

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

    AJie 評論0 收藏0

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

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

    ivyzhang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<