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

資訊專欄INFORMATION COLUMN

理解CSS中的層疊上下文和層疊順序

Bryan / 3263人閱讀

摘要：后來(lái)居上當(dāng)元素的層疊水平一致層疊順序相同的時(shí)候，在流中處于后面的元素會(huì)覆蓋前面的元素。相關(guān)連接深入理解中的層疊上下文和層疊順序?qū)盈B順序探究分層的顯示

什么是層疊上下文（stacking context）

可以理解為一個(gè)dom節(jié)點(diǎn)在Z軸高人一等，特性類似于BFC，即層疊上下文的內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會(huì)影響外部的元素。

CSS2創(chuàng)建層疊上下文的兩種方法（參考MDN）

根元素 (HTML)

絕對(duì)（absolute）定位或相對(duì)（relative）定位且 z-index 值不為”auto”

CSS3新增的8種方法（參考MDN）

一個(gè) flex 元素(flex item)，且 z-index 值不為 “auto”，也就是父元素 display: flex|inline-flex

元素的 opacity 屬性值小于 1（參考：the specification for opacity）

元素的 transform 屬性值不為 “none”

元素的 mix-blend-mode 屬性值不為 “normal”

元素的 isolation 屬性被設(shè)置為 “isolate”

在 mobile WebKit 和 Chrome 22+ 內(nèi)核的瀏覽器中，position: fixed 總是創(chuàng)建一個(gè)新的層疊上下文, 即使 z-index 的值是 “auto”

在 will-change 中指定了任意 CSS 屬性，即便你沒(méi)有定義該元素的這些屬性（參考：Everything You Need to Know About the CSS will-change Property）

元素的 -webkit-overflow-scrolling 屬性被設(shè)置 “touch”

什么是層疊水平（stacking level）

層疊水平?jīng)Q定了同一個(gè)層疊上下文中元素在z軸上的顯示順序（層疊順序），也就是說(shuō)普通元素的層疊水平優(yōu)先由層疊上下文決定。

層疊順序（不包含CSS3屬性）

注意：以上只適用于同一個(gè)層級(jí)上下文
層疊順序的例子

CSS2層疊上下文的層疊順序demo

創(chuàng)建層疊上下文的opacity影響層疊順序的例子

驗(yàn)證css中opacity創(chuàng)建層疊上下文影響的層疊順序demo

層疊準(zhǔn)則

誰(shuí)大誰(shuí)上：當(dāng)具有明顯的層疊水平標(biāo)識(shí)（即上面那幅層疊順序圖）的時(shí)候，在同一個(gè)層疊上下文內(nèi)，層疊水平值大的那一個(gè)覆蓋小的那一個(gè)。

后來(lái)居上：當(dāng)元素的層疊水平一致、層疊順序相同的時(shí)候，在DOM流中處于后面的元素會(huì)覆蓋前面的元素。

結(jié)論

屬于同一層疊上下文的元素（無(wú)論它們?cè)诮Y(jié)構(gòu)上是兄弟或父子，甚至是祖孫），都遵循上文所述的層疊順序；

不同的層疊上下文之間，層級(jí)較大的層疊上下文元素及其內(nèi)部元素位于層級(jí)小的層疊上下文元素及其內(nèi)部元素之上；

不同的層疊上下文之間互相獨(dú)立；

層疊上下文可嵌套，內(nèi)部規(guī)則不影響外部。

相關(guān)連接

MDN：The stacking context
深入理解CSS中的層疊上下文和層疊順序
css層疊順序探究
分層的顯示

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

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

相關(guān)文章

  • 徹底搞懂CSS層疊上下文、層疊等級(jí)、層疊順序、z-index

    摘要：栗子有兩個(gè)，被包裹在一個(gè)里，被包裹在另一個(gè)盒子里，同時(shí)為兩個(gè)和設(shè)置和屬性效果我們發(fā)下，雖然元素的值為，遠(yuǎn)大于和的值，但是由于的父元素產(chǎn)生的層疊上下文的的值為，的父元素所產(chǎn)生的層疊上下文的值為，所以永遠(yuǎn)在和下面。 前言 最近，在項(xiàng)目中遇到一個(gè)關(guān)于CSS中元素z-index屬性的問(wèn)題，具體問(wèn)題不太好描述，總結(jié)起來(lái)就是當(dāng)給元素和父元素色設(shè)置position屬性和z-index相關(guān)屬性后，頁(yè)面...

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

  • 徹底搞懂CSS層疊上下文、層疊等級(jí)、層疊順序、z-index

    摘要：栗子有兩個(gè)，被包裹在一個(gè)里，被包裹在另一個(gè)盒子里，同時(shí)為兩個(gè)和設(shè)置和屬性效果我們發(fā)下，雖然元素的值為，遠(yuǎn)大于和的值，但是由于的父元素產(chǎn)生的層疊上下文的的值為，的父元素所產(chǎn)生的層疊上下文的值為，所以永遠(yuǎn)在和下面。 前言 最近，在項(xiàng)目中遇到一個(gè)關(guān)于CSS中元素z-index屬性的問(wèn)題，具體問(wèn)題不太好描述，總結(jié)起來(lái)就是當(dāng)給元素和父元素色設(shè)置position屬性和z-index相關(guān)屬性后，頁(yè)面...

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

  • CSS 層疊上下文（Stacking Context）

    摘要：當(dāng)?shù)诙拥娜萜骱凶由?jí)為層疊上下文時(shí)，紅色盒子及灰色盒子的軸層級(jí)受制于第二層的容器盒子。當(dāng)元素處于同一層疊上下文內(nèi)時(shí)可按照如下規(guī)則進(jìn)行層疊判斷。 本文首發(fā)于政采云前端團(tuán)隊(duì)博客：CSS 層疊上下文（Stacking Context） 在網(wǎng)頁(yè)制作的過(guò)程中，元素與元素之間的位置關(guān)系，在坐標(biāo)軸上一般可體現(xiàn)為 X 軸、Y 軸和 Z 軸。對(duì)于 X 軸和 Y 軸的定位大多數(shù)開(kāi)發(fā)都能比較直觀的搞清楚...

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

  • 【學(xué)習(xí)筆記】CSS深入理解之z-index

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。遵循后來(lái)居上和誰(shuí)大誰(shuí)上的層疊原則。 張?chǎng)涡竦腃SS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個(gè) z-index 值不為 ...

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

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

0條評(píng)論

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