div的分層&層疊上下文

一個(gè)div的分層：由下到上分別是，background，border，塊級(jí)子元素，浮動(dòng)子元素，內(nèi)聯(lián)子元素

div的分層-1

div的分層-2

根據(jù)這個(gè)原理，其實(shí)浮動(dòng)就是將其分層上提一層。

層疊式上下文：當(dāng)元素使用了某些樣式屬性后，就會(huì)出現(xiàn)元素與元素之間發(fā)生重疊的現(xiàn)象，這時(shí)候在平面空間的基礎(chǔ)上，元素又有了一層垂直空間的關(guān)系，這就是層疊上下文。但是，層疊上下文的最底層永遠(yuǎn)是<html>元素（根元素<html>本身就能創(chuàng)建層疊上下文）。

層疊式上下文

如何創(chuàng)建層疊上下文？

具體看層疊上下文MDN

比較重要的幾個(gè)：z-index/flex/opacity/transform/fixed

z-index與層疊上下文

1. z-index能決定在同一個(gè)層疊上下文空間中，元素的順序，值越大，則位置越高。

2. z-index的取值默認(rèn)為auto，可以取任意正負(fù)整數(shù)，0。注意：auto計(jì)算的值是0，但是auto和直接z-index=0完全不一樣，最簡(jiǎn)單的z-index:auto不會(huì)創(chuàng)建層疊上下文，而z-index=0會(huì)。

3. z-index的比較要分清楚兩個(gè)元素是否在同一個(gè)層疊上下文空間中。只有在同一個(gè)層疊上下文空間中的元素，才能用z-index（正整數(shù)，負(fù)數(shù)會(huì)出現(xiàn)奇怪的效果）比較。如果一個(gè)元素的層疊上下文空間比另一個(gè)元素的層疊上下文空間要高級(jí)，在z-index為正整數(shù)的情況下，空間更高級(jí)元素的z-index更小也會(huì)出現(xiàn)在更上方。z-index=5浮在z-index=10上方

4. z-index負(fù)數(shù)無(wú)論再小也不會(huì)逃出<html>創(chuàng)建的層疊上下文空間中。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容