亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

z-index與堆疊上下文

Aldous / 2120人閱讀

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

z-index與堆疊上下文 動(dòng)機(jī)

最近項(xiàng)目中同時(shí)使用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時(shí)，將產(chǎn)生堆疊上下文（stacking context）。下面結(jié)合幾個(gè)例子說(shuō)說(shuō)堆疊上下文是什么。

常規(guī)堆疊順序

沒有使用z-index時(shí)，默認(rèn)z-index:auto，此時(shí)>不會(huì)產(chǎn)生堆疊上下文（stacking context），所有元素都處在同一層，同父元素的層級(jí)。

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.

此時(shí)堆疊順序如下（從下到上）：

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

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

浮動(dòng)元素

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

下面看看例子：

 #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;
    }

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


        
DIV #1
        
position: absolute;
    


    

        
DIV #2
        
float: left;
    


    

        
DIV #3
        
float: right;
    


    

    

        
DIV #4
        
no positioning

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

上述是沒有z-index時(shí)的默認(rèn)情況，渲染層就是layer 0。

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

z-index有幾個(gè)關(guān)鍵點(diǎn)：

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

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

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

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

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

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

總結(jié)：

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

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

#2，#4z-index未生效（未產(chǎn)生堆疊上下文），同父元素（html）的設(shè)置，值為默認(rèn)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)一個(gè)元素position為(absolute或relative)，且擁有一個(gè)z-index值（不為auto）

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

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

當(dāng)一個(gè)元素被設(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為例,我們?cè)?4上加入opacity:0.5。此時(shí)#4生成堆疊上下文，其子元素#8最終為0.3。在#1,#3,#5之下。

參考文獻(xiàn)

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

  • 理解 CSS 的 z-index 屬性

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

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

  • 圖解一下啥是CSS堆疊上下文，啥是CSS堆疊層疊順序，讓你對(duì)css的疑惑少一點(diǎn)?

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

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