成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Bryan / 3295人閱讀

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

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

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

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

根元素 (HTML)

絕對（absolute）定位或相對（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 屬性，即便你沒有定義該元素的這些屬性（參考：Everything You Need to Know About the CSS will-change Property）

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

什么是層疊水平（stacking level）

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

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

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

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

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

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

層疊準(zhǔn)則

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

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

結(jié)論

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

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

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

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

相關(guān)連接

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/115876.html

相關(guān)文章

  • 徹底搞懂CSS層疊上下文、層疊等級、層疊順序、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屬性的問題，具體問題不太好描述，總結(jié)起來就是當(dāng)給元素和父元素色設(shè)置position屬性和z-index相關(guān)屬性后，頁面...

    Steve_Wang_ 評論0 收藏0

  • 徹底搞懂CSS層疊上下文、層疊等級、層疊順序、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屬性的問題，具體問題不太好描述，總結(jié)起來就是當(dāng)給元素和父元素色設(shè)置position屬性和z-index相關(guān)屬性后，頁面...

    Donne 評論0 收藏0

  • CSS 層疊上下文（Stacking Context）

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

    marek 評論0 收藏0

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

    摘要：張鑫旭的深入理解之學(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個(gè)層級，離父級層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。 張鑫旭的CSS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個(gè)層級，離父級層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個(gè) z-index 值不為 ...

    Steven 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<