z-index與堆疊上下文

Aldous 發布于2019-08-29 13:23 / 2059人閱讀

摘要：與堆疊上下文動機最近項目中同時使用和遇到一些問題，值設了很大，但是不起作用。總結設置且不為，將產生堆疊上下文，堆疊規則異于常規堆疊。，，生效產生堆疊上下文，分別是。此時生成堆疊上下文，其子元素最終為。

z-index與堆疊上下文 動機

最近項目中同時使用z-index和opacity遇到一些問題，z-index值設了很大，但是不起作用。找了一些資料，重新梳理了z-index的重疊規則。

z-index

MDN中z-index的描述為：用于指定已經定位的元素（即position:relative/absolute/fixed）在文中的堆疊順序。按照數值放置，高的在上面。
當z-index不為auto時，將產生堆疊上下文（stacking context）。下面結合幾個例子說說堆疊上下文是什么。

常規堆疊順序

沒有使用z-index時，默認z-index:auto，此時>不會產生堆疊上下文（stacking context），所有元素都處在同一層，同父元素的層級。

The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent"s box.

此時堆疊順序如下（從下到上）：

根元素（即HTML元素）的background和borders

正常流中非定位后代元素（這些元素順序按照HTML文檔出現順序，后面的會覆蓋前面的）

浮動元素

正常流中已定位后代元素（這些元素順序按照HTML文檔出現順序，后面的會覆蓋前面的）

下面看看例子：

 #absdiv1 {
        position: absolute;
        width: 150px;
        height: 200px;
        top: 10px;
        right: 140px;
        border: 1px dashed #990000;
        background-color: #ffffffdd;
    }

    #normdiv {
        height: 100px;
        border: 1px dashed #999966;
        background-color: #ffffcc;
        margin: 0px 10px 0px 10px;
        text-align: left;
    }

    #flodiv1 {
        margin: 0px 10px 0px 20px;
        float: left;
        width: 150px;
        height: 200px;
        border: 1px dashed #009900;
        background-color: #ccffcc;
    }

    #flodiv2 {
        margin: 0px 20px 0px 10px;
        float: right;
        width: 150px;
        height: 200px;
        border: 1px dashed #009900;
        background-color: #ccffcc;
    }

為了說明效果，div按照相反的堆疊順序放置


        
DIV #1
        
position: absolute;
    

    
        
DIV #2
        
float: left;
    

    
        
DIV #3
        
float: right;
    

    

    
        
DIV #4
        
no positioning

在沒有z-index的情況下，html順序為#1->#2->#3->#4->#5，渲染順序為#4(正常流中非定位后代元素)->#2(浮動元素)->#3(浮動元素)->#1(正常流中已定位后代元素)->#5(正常流中已定位后代元素)。

上述是沒有z-index時的默認情況，渲染層就是layer 0。

z-index生成堆疊上下文改變堆疊順序

z-index有幾個關鍵點：

只適用于已經定位的元素(即position:relative/absolute/fixed)

渲染順序按照z-index大小，從低到高

z-index生效時將產生堆疊上下文
可以看到，由于#1，#3，#5設置了position，z-index生效，而 #2和#4未生效，z-index:0。

上面div都是同級的，下面看看在子元素中設置z-index的情況。在#3中加入子元素#6 #7，在#4中設置子元素#8。

#3中的子元素#6 #7雖然設置了z-index：10,z-index：11，但仍處于#1的下面。這是因為#3的z-index 生效，生成了堆疊上下文（stacking context），而處在堆疊上下文的元素的z-index只在當前父元素下有效，子堆疊上下文被看做是父堆疊上下文中一個獨立的模塊，相鄰的堆疊上下文完全沒關系。

再來看看#4中的子元素#8，由于#4的沒有設置position，因此z-index無效，還處在z-index:0中，且沒有生成堆疊上下文。而子元素#8 z-index生效，將和#5,#3,#1處在同級，在#3之后，#4之前。

總結：

設置position且z-index不為auto，將產生堆疊上下文，堆疊規則異于常規堆疊。

處在堆疊上下文的元素的z-index只在當前父元素下有效，子堆疊上下文被看做是父堆疊上下文中一個獨立的模塊，相鄰的堆疊上下文完全沒關系。意味著如果一個元素位于一個最低位置的層，那你z-index設置得再大，它也不會出現在其它層元素的上面。我們可以將產生上下文堆疊的層級按照如下規則理解：

#2，#4z-index未生效（未產生堆疊上下文），同父元素（html）的設置，值為默認auto，即0。

#1，#3，#5 z-index生效（產生堆疊上下文），分別是4,3,1。

#6,#7的父元素#3為3，故#6為3.10（z-index生效，產生堆疊上下文）,#7為3.0（z-index未生效，未產生堆疊上下文）

#8父元素#2 為0，#8 z-index生效（產生堆疊上下文），為3.

產生堆疊上下文的幾種情況

除了z-index+position，[MDN-stacking_context]中列舉了產生堆疊上下文的幾種情況。

HTML根文檔

當一個元素position為(absolute或relative)，且擁有一個z-index值（不為auto）

當一個元素position為fixed或sticky

當一個元素是flexbox的子元素，且擁有一個z-index值（不為auto）

當一個元素被設置了opacity（小于1），transforms, filters, perspective，clip-path，css-regions, paged media，mask / mask-image / mask-border，mix-blend-mode（不為normal）, isolation (值為isolate)，-webkit-overflow-scrolling （值為touch），will-change 等屬性。

以opacity為例,我們在#4上加入opacity:0.5。此時#4生成堆疊上下文，其子元素#8最終為0.3。在#1,#3,#5之下。

參考文獻

https://developer.mozilla.org...
https://developer.mozilla.org...
http://www.myexception.cn/HTM...
http://blog.csdn.net/u0143463...
http://www.w3cplus.com/css/wh...
https://www.w3.org/TR/CSS2/zi...

云服務器 GPU云服務器堆疊堆疊服務器 z-index 服務器堆疊技術

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

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

理解 CSS 的 z-index 屬性

摘要：通常認為頁面是二維的，但實際上，還有一個屬性，允許層疊元素。所有的盒模型元素都處于三維坐標系中。多個元素的屬性相同時，將按照上文描述的順序布局。使用排序的例子注意，的無效，因為未指定屬性。每個堆疊上下文和它的同級上下文是獨立的。通常認為HTML頁面是二維的，但實際上，CSS還有一個z-index屬性，允許層疊元素。所有的盒模型元素都處于三維坐標系中。除了我們常用的橫坐標和...

cangck_X 2019-08-28 17:51 評論0 收藏0
圖解一下啥是CSS堆疊上下文，啥是CSS堆疊層疊順序，讓你對css的疑惑少一點?

摘要：即浮動元素是在文字區域與塊級元素之間的。堆疊上下文也是類似的道理，你很難說出什么是堆疊上下文，但只要它滿足列出的幾種情況，它就是堆疊上下文。這就是堆疊上下文一個特性。 CSS 堆疊上下文是啥？我們有一個基本樣式的 div，樣式如下： div{ width: 200px; height: 200px; border:10px solid red; pad...

GitChat 2019-08-29 16:55 評論0 收藏0
層疊上下文【stacking context】與層疊順序【stacking order】

摘要：層疊上下文可以嵌套，內部層疊上下文及其所有子元素均受制于外部的層疊上下文。例當按以下設置，則出現紅色在綠色之上的效果。如何觸發觸發一個元素形成層疊上下文有以下方法，摘自根元素值不為的絕對相對定位一個值不為的項目，即父元素。層疊上下文【stacking context】對于stacking context，在MDN中的描述是 Stacking context is the three...

Developer 2019-08-29 11:23 評論0 收藏0
css中那些需要組合、互斥和特別注意的屬性

摘要：盒子的偏移位置不影響常規流中的任何元素，其不與其他任何折疊。當的值為非時，其層疊級別通過屬性定義。最常見的有簡稱和簡稱。它是塊級盒布局出現的區域，也是浮動層元素進行交互的區域。 css學習很少有人會很系統的把css學習一遍，大部分都是遍歷下。然后然后記住常用的，不常用的也要回查找，前端人很多都認同要學好css真的不很難，這里記錄下很多場景下使用css需要注意的地方，同樣，開頭頁列出一...

plokmju88 2019-08-29 13:44 評論0 收藏0
切圖系列：W3C奇技淫巧之層疊上下文

摘要：同一個層疊上下文中，層疊級別相同的兩個元素，依據它們在文檔流中的順序，寫在后面的將會覆蓋前面的。因此，元素的層疊關系不僅與它在堆疊上下文中所屬的層疊級別有關，還與它所在的堆疊上下文的順序有關。 w3c規范里的stacking context，譯作層疊上下文，最主要的作用還是用來比較一個擁有定位元素（position:!static）的元素的z軸層疊關系（z-index）。先上一個經典...

pcChao 2019-08-28 18:26 評論0 收藏0