一、什麼是層疊式上下文
層疊上下文，是html中的乙個三維概念
如果元素具備以下任何乙個條件，則該元素會建立乙個新的層疊上下文。
二、什麼是層疊級別
同乙個層疊上下文的背景色以及內部元素，誰在上誰在下，這些都是由層疊級別來決定的。層疊級別是針對同乙個層疊上下文而言的。
在同乙個曾得上下文中，層疊級別從低到高排列如下：
邊框和背景：也就是當前層疊上下文的邊框和背景
負z-index：z-index為負值的「內部元素」
塊元素：普通文件流下的塊盒子（block-levelbox）
浮動盒子：非定位的浮動元素
行內盒子：普通文件流下的行內盒子
z-index：0：z-index為0的「內部元素」
正z-index：x-index為正值的「內部元素」
三、層疊上下文的特點
層疊上下文
本文是我學習層疊上下文的總結。主要從以下途徑學習 mdn 張鑫旭大大的博文 層疊順序遵循下圖的規則，其中在張鑫旭大大的博文中提到inline block的層疊順序與圖中inline box是乙個level的 z index auto實際上和z index 0單純從層疊水平上看，可以認為是同一leve...
CSS層疊上下文
以下幾種方式可以建立層疊上下文 包括但不限於哈 對有定位的元素 即postion不是預設的static 設定 z index值 將 opacity 設定成比1小的值 將 position 設定成 fixed 或者 sticky 不需要再設定 z index 不使用 normal 而是使用 mix b...
層疊上下文與層疊順序
參考文章 深入理解css中的層疊上下文和層疊順序 css深入理解之z index css深入理解之relative 先來弄清楚什麼是，層疊上下文。層疊上下文，英文稱作 stacking context 是html中的乙個三維的概念。如果乙個元素含有層疊上下文，我們可以理解為這個元素在z軸上就 高人一...