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

資訊專欄INFORMATION COLUMN

z-index與堆疊上下文

Aldous / 2068人閱讀

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

z-index與堆疊上下文 動機

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

z-index

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

常規(guī)堆疊順序

沒有使用z-index時，默認z-index:auto，此時>不會產(chǎn)生堆疊上下文（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文檔出現(xiàn)順序，后面的會覆蓋前面的）

浮動元素

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

下面看看例子：

 #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有幾個關(guān)鍵點：

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

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

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

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

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

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

總結(jié)：

設(shè)置position且z-index不為auto，將產(chǎn)生堆疊上下文，堆疊規(guī)則異于常規(guī)堆疊。

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

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

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

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

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

產(chǎn)生堆疊上下文的幾種情況

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

HTML根文檔

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

當(dāng)一個元素position為fixed或sticky

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

當(dāng)一個元素被設(shè)置了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...

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

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

相關(guān)文章

  • 理解 CSS 的 z-index 屬性

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

    cangck_X 評論0 收藏0

  • 圖解一下啥是CSS堆疊上下文，啥是CSS堆疊層疊順序，讓你對css的疑惑少一點?

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

    GitChat 評論0 收藏0

  • 層疊上下文【stacking context】與層疊順序【stacking order】

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

    Developer 評論0 收藏0

  • css中那些需要組合、互斥和特別注意的屬性

    摘要：盒子的偏移位置不影響常規(guī)流中的任何元素，其不與其他任何折疊。當(dāng)?shù)闹禐榉菚r，其層疊級別通過屬性定義。最常見的有簡稱和簡稱。它是塊級盒布局出現(xiàn)的區(qū)域，也是浮動層元素進行交互的區(qū)域。 css學(xué)習(xí) 很少有人會很系統(tǒng)的把css學(xué)習(xí)一遍，大部分都是遍歷下。然后然后記住常用的，不常用的也要回查找，前端人很多都認同要學(xué)好css真的不很難，這里記錄下很多場景下使用css需要注意的地方，同樣，開頭頁列出一...

    plokmju88 評論0 收藏0

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

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

    pcChao 評論0 收藏0

發(fā)表評論

0條評論

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