z-index 不生效往往是因為層疊上下文的影響。 1. 層疊上下文是一個元素的“空間範(fàn)圍”，子元素的堆疊順序在其中獨(dú)立計算；2. 創(chuàng)建方式包括設(shè)置定位z-index、opacity 小於1、transform 等；3. z-index 只對定位元素有效，父子級在不同上下文中時層級無法直接比較；4. 瀏覽器根據(jù)DOM 順序、定位、佈局方式等綜合決定堆疊順序；5. 實(shí)際問題如模態(tài)框被遮擋需檢查上下文層級並調(diào)整結(jié)構(gòu)或z-index 而非盲目增加數(shù)值。

CSS 中的z-index和層疊上下文（stacking context）是控制元素在Z 軸方向上堆疊順序的關(guān)鍵概念。很多人用過z-index ，但有時會發(fā)現(xiàn)它“不生效”，其實(shí)往往是忽略了層疊上下文的作用。這篇文章就來聊聊怎麼真正用好它們。

什麼是層疊上下文？

層疊上下文可以理解為一個“空間範(fàn)圍”，在這個範(fàn)圍內(nèi)，所有子元素的堆疊順序都會被相對計算。
創(chuàng)建一個新的層疊上下文的方式有幾種：

• 給元素設(shè)置position不為static （比如relative , absolute , fixed , sticky ），同時設(shè)置了z-index值
• 使用opacity小於1
• 使用transform 、 filter 、 will-change等屬性
• 設(shè)置isolation: isolate

一旦某個父元素形成了自己的層疊上下文，它的子元素之間的z-index只能在該上下文中比較，不會和外部層級直接競爭。

z-index 的使用技巧

z-index是我們最熟悉的控制堆疊順序的屬性，但它只對定位元素（即設(shè)置了非static的position ）有效。

常見誤區(qū)：

• 直接給普通div設(shè)置z-index沒效果
• 父子元素都在不同層疊上下文中時，父級整體決定了子級的位置上限

建議做法：

• 總是配合position: relative或其他定位方式使用z-index
• 控制層級時盡量保持在一個上下文中操作，避免嵌套太深的層級結(jié)構(gòu)
• 避免隨意使用超大值如z-index: 999999 ，這樣容易失控，維護(hù)困難

層疊順序是怎麼決定的？

瀏覽器渲染頁面時，不是只看z-index ，而是根據(jù)一套規(guī)則來決定哪些元素顯示在上面。這個規(guī)則包括：

• 元素的DOM 順序
• 是否設(shè)置了定位和z-index
• 是否屬於不同的層疊上下文
• 是否使用了flex 、 grid等佈局方式

大致順序如下（從下到上）：

• 背景和邊框
• 普通流中的塊級元素
• 浮動元素
• 定位元素（按z-index排序）

如果你發(fā)現(xiàn)兩個定位元素沒有按照預(yù)期堆疊，很可能是因為其中一個被包裹在另一個層疊上下文中。

實(shí)際應(yīng)用中要注意的問題

在實(shí)際開發(fā)中，常見的問題包括模態(tài)框被遮擋、導(dǎo)航欄菜單消失在輪播圖後面等，這些都跟層疊上下文有關(guān)。

舉個例子：

你有一個彈窗組件用了position: fixed並設(shè)置了z-index: 1000 ，但頁面裡某個輪播圖用了transform: translateX() ，這會讓輪播圖所在的容器生成新的層疊上下文，導(dǎo)致彈窗可能被遮住。

這時候的解決辦法是檢查並統(tǒng)一兩者的上下文層級，或者適當(dāng)調(diào)整z-index ，而不是盲目加數(shù)字。

基本上就這些。理解清楚層疊上下文和z-index的關(guān)係，能幫你更穩(wěn)地控制頁面元素的堆疊順序。

以上是在CSS中使用z索引和堆疊上下文的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！