普通元素的層疊水平優先由層疊上下文決定，因此，層疊水平的比較只有在當前層疊上下文元素中才有意義。

諸位千萬不要把層疊水平和CSS的z-index屬性混為一談。沒錯，某些情況下z-index確實可以影響層疊水平，但是，只限于定位元素以及flex盒子的孩子元素；而層疊水平所有的元素都存在。

什么是層疊順序

border/background一般為裝飾屬性，而浮動和塊狀元素一般用作布局，而內聯元素都是內容。網頁中最重要的是什么？當然是內容了哈，對不對！

因此，一定要讓內容的層疊順序相當高，當發生層疊是很好，重要的文字啊圖片內容可以優先暴露在屏幕上

位于最低水平的border/background指的是層疊上下文元素的邊框和背景色。每一個層疊順序規則適用于一個完整的層疊上下文元素。

原圖沒有呈現inline-block的層疊順序，實際上，inline-block和inline水平元素是同等level級別。

z-index:0實際上和z-index:auto單純從層疊水平上看，是可以看成是一樣的。注意這里的措辭——“單純從層疊水平上看”，實際上，兩者在層疊上下文領域有著根本性的差異。

③. CSS3與新時代的層疊上下文
CSS3的出現除了帶來了新屬性，同時還對過去的很多規則發出了挑戰。例如，CSS3?transform對overflow隱藏對position:fixed定位的影響等。而這里，層疊上下文這一塊的影響要更加廣泛與顯著。

如下：

z-index值不為auto的flex項(父元素display:flex|inline-flex).

元素的opacity值不是1.

元素的transform值不是none.

元素mix-blend-mode值不是normal.

元素的filter值不是none.

元素的isolation值是isolate.

will-change指定的屬性值為上面任意一個。

元素的-webkit-overflow-scrolling設為touch.

?

摘取自：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

轉載于:https://www.cnblogs.com/xiaofenguo/p/6295809.html

總結

以上是生活随笔為你收集整理的css层叠上下文和层叠顺序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。