你是不是遇到過(guò)這種情況：

設(shè)置了 z-index: 9999，結(jié)果你的元素還是被其他東西“欺負(fù)”藏到后面去了？

放心，這種感覺(jué)我也深有體會(huì)，曾經(jīng)對(duì)著屏幕狂喊，查了無(wú)數(shù)次谷歌。

真相是：z-index 沒(méi)壞，問(wèn)題出在你可能正在和一個(gè)看不見(jiàn)的“力場(chǎng)”——堆疊上下文（stacking context）作斗爭(zhēng)。

一旦搞懂它，你再也不用盲目提高數(shù)字來(lái)“救急”了。

下面輕松說(shuō)說(shuō) z-index 和堆疊上下文。

z-index 基礎(chǔ)理解

在 CSS 中，z-index 控制重疊元素的前后順序。

值越大，元素越靠前顯示。

圖片

例如，.box2 的 z-index 高于 .box1，所以它會(huì)顯示在前面。

定位對(duì) z-index 的影響

z-index 只有在元素設(shè)置了非默認(rèn)定位（非 static）時(shí)才生效。

換句話說(shuō)，你得把元素設(shè)置成 relative、absolute、fixed 或 sticky，z-index 才會(huì)起作用。

如果沒(méi)設(shè)置，z-index 是白搭。

堆疊上下文：無(wú)形的界限

堆疊上下文就像元素沿著 z 軸的“立體宇宙”。

在不同的堆疊上下文中，z-index 只在當(dāng)前上下文里比較，無(wú)法跨上下文“穿越”。

哪些 CSS 屬性會(huì)創(chuàng)建新的堆疊上下文呢？比如：

• 帶有非 autoz-index 的定位元素
• 不等于 1 的 opacity
• 非 none 的 transform、filter、perspective、clip-path、mask
• contain 和 will-change 指定的屬性

圖片

舉例來(lái)說(shuō)，.child 即使 z-index 比父元素外的元素高，也無(wú)法超越 .parent 堆疊上下文的限制。

常見(jiàn)問(wèn)題與對(duì)策

• 沒(méi)設(shè)置定位記得給元素設(shè)個(gè)非 static 定位。
• 嵌套堆疊上下文注意父元素是否創(chuàng)建了新的堆疊上下文，會(huì)限制子元素的層級(jí)關(guān)系。
• 意外創(chuàng)建堆疊上下文比如不小心用到 opacity 小于 1 或 transform，讓你沒(méi)想到的新上下文誕生。

調(diào)試技巧

• 用瀏覽器開(kāi)發(fā)者工具查看元素的計(jì)算樣式，找出實(shí)際的 z-index 和堆疊上下文。
• 簡(jiǎn)化結(jié)構(gòu)暫時(shí)注釋 CSS，查找哪個(gè)屬性導(dǎo)致了新的堆疊上下文。
• 明確設(shè)置 z-index必要時(shí)給父元素也加上 z-index，以控制堆疊順序。

總結(jié)

理解 z-index 和堆疊上下文的工作原理，是控制網(wǎng)頁(yè)元素層疊順序的關(guān)鍵。

只要確保定位正確，留心堆疊上下文的產(chǎn)生，你就能輕松掌控元素顯示層級(jí)。