切圖系列：W3C奇技淫巧之層疊上下文

pcChao 發布于2019-08-28 18:26 / 2931人閱讀

摘要：同一個層疊上下文中，層疊級別相同的兩個元素，依據它們在文檔流中的順序，寫在后面的將會覆蓋前面的。因此，元素的層疊關系不僅與它在堆疊上下文中所屬的層疊級別有關，還與它所在的堆疊上下文的順序有關。

w3c規范里的stacking context，譯作層疊上下文，最主要的作用還是用來比較一個擁有定位元素（position:!static）的元素的z軸層疊關系（z-index）。

先上一個經典的例子：

http://jsbin.com/pupibo/11/edit][1]

代碼：

html:

  A z-index:1;
  B
  C

css

#a,#b,#c{
  position:absolute;
  width:200px;
  height:100px;
}
#a{
  left:20px;
  top:20px;
  background:yellow;
  z-index:1;
}
#b{
  left:50px;
  top:50px;
  background:pink;
}
#c{
  left:80px;
  top:80px;
  background:cyan;
}

效果：

問題：在不給#b #c設置z-index的情況下，如何讓#a置于其他兩者的后面？

答案你知道的，給包裹#a的div增加樣式：

  div:first-of-type{
    opacity:0.9999;
  }

其實這里就涉及到堆疊上下文的概念了。context這個名詞在css相關規范里見得多了，最著名的有塊級格式上下文（block formatting context）。那么什么是上下文（context）呢？按我的理解，應該是某種類似環境的東西，一旦一個元素被加入一個context，他們的某些屬性值會放在一起比較，最終的比較結果會影響到他們的視覺呈現。

而處于同一個堆疊格式上下文內的元素，它們會相互比較自己在z軸疊放的順序，從而知道誰應該在誰的上面、誰應該在誰的下面（貴圈真亂 (。?д?。) ）：

同一個層疊上下文中，層疊級別（即z-index屬性值）大的顯示在上面，反之顯示在下面。

同一個層疊上下文中，層疊級別相同的兩個元素，依據它們在HTML文檔流中的順序，寫在后面的將會覆蓋前面的。

那么問題來了，可不可能產生一個新的層疊上下文？

當然可能，根據規范，以下情況將會產生一個新的層疊上下文：

當一個元素是文檔的根元素時，在完整的html文檔里，根元素是html標簽；

當元素擁有一個值為非static的position且擁有一個值為非auto的z-index樣式時；

當元素擁有一個值小于1的opacity樣式時；

當元素擁有一個值不為none且有效的transform樣式時；

當元素擁有一個值為display:flex|inline-flex的樣式且z-index不為auto時；

當元素擁有一個值不為normal的mix-blend-mode樣式時；

當元素擁有一個值為isolate的isolation樣式時；

當元素的will-change樣式指定為上述任意一個值時；

在移動端，當元素擁有一個值為touch的-webkit-overflow-scrolling值時；

當元素的filter（此處為CSS3的濾鏡）值不為none時；

在 IE6,7 下，當元素擁有一個值為非static的position的樣式時，即使z-index未定義。

因此，元素的層疊關系不僅與它在堆疊上下文中所屬的層疊級別有關，還與它所在的堆疊上下文的順序有關。這就是上面例子的全部秘密。而前文中的例子，其實還有另一種方法，對，給div:first-of-type添加transform:transform-function樣式。

最后，看到特地給ie6/7加粗的那條了嗎？嗯，這就是ie6/7那個著名bug的根源，具體bug解剖請看張鑫旭大大2009年的一篇文章：ie6下z-index犯癲不起作用bug的初步研究，或者@doyoe的這個簡單的demo。

最后附上這道題答案的效果：

http://jsbin.com/pupibo/12

效果圖：

GPU云服務器云服務器系列之系列之二架構之坑系列奇技

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111232.html

【Hello CSS】第六章-文檔流與排版

摘要：作者陳大魚頭正常流什么是正常流其實就是我們日常所說的文檔流。在官方文檔里對應的是。然后，包含形成一條線的框的矩形區域稱為線盒。基線線盒的高度由的計算結果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。作者：陳大魚頭 github： KRISACHAN 正常流什么是正常流？其實就是我們日常所說的文檔流。在W3C官方文檔里對應的是normal ...

nihao 2019-08-02 15:35 評論0 收藏0
【Hello CSS】第六章-文檔流與排版

摘要：作者陳大魚頭正常流什么是正常流其實就是我們日常所說的文檔流。在官方文檔里對應的是。然后，包含形成一條線的框的矩形區域稱為線盒。基線線盒的高度由的計算結果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。作者：陳大魚頭 github： KRISACHAN 正常流什么是正常流？其實就是我們日常所說的文檔流。在W3C官方文檔里對應的是normal ...

null1145 2019-08-30 11:27 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0
查漏補缺 - 收藏集 - 掘金

摘要：醞釀許久之后，筆者準備接下來撰寫前端面試題系列文章，內容涵蓋瀏覽器框架分鐘搞定常用基礎知識前端掘金基礎智商劃重點在實際開發中，已經非常普及了。這道題--致敬各位10年阿里的前端開發 - 掘金很巧合，我在認識了兩位同是10年工作經驗的阿里前端開發小伙伴，不但要向前輩學習，我有時候還會選擇另一種方法逗逗他們，拿了網上一道經典面試題，可能我連去阿里面試的機會都沒有，但是我感受到了一次面試1...

YuboonaZhang 2019-08-29 12:56 評論0 收藏0