CSS z-index 如何控制 HTML 元素的堆疊順序？

理解z-index 堆疊順序

使用z-index 定位元素

CSS 中的z-index 屬性決定了定位元素的堆疊順序。具體來說，它規定了哪些元素出現在 z 軸上其他元素的前面或後面，這表示三維平面上的深度。

對定位元素的影響

僅 Z 索引有效位於非靜態位置（即絕對、相對、固定或黏性）的元素上。它不會影響具有靜態位置的元素或使用浮動定位的元素。

堆疊上下文

當元素被定位並應用了 z-index 時，會建立堆疊上下文。在堆疊上下文中，z-index 屬性設定定位元素及其後代的堆疊順序。堆疊上下文可防止一個上下文中的元素幹擾另一個上下文中元素的堆疊順序。

堆疊順序規則

未指定 z-index 的元素的堆疊順序如下：

1. 根元素的背景和邊框
2. 非定位，非浮動塊元素
3. 非定位浮動元素
4. 內聯元素
非定位浮動元素
5. 內聯元素

定位元元素

1. 當應用z-index屬性時，堆疊順序已修改：
2. 背景和邊框根元素
3. z-index小於0 的定位元素
4. 非定位、非浮動塊元素
5. 非定位浮動元素
6. 內聯元素
7. z-index 為的定位元素0

z 索引大於 0的定位元素

堆疊順序範例

帶或不含混合同級
位置：
div. sibling-1 的位置：靜態，z 索引：0
div.sibling-2的位置：絕對，z 索引：1
結果： div.sibling-2 會出現在前面div.sibling-1 因為它的 z-index 較高。
與同級

• ：
  • div🎜>
• div.child-1 的位置：靜態，z 索引：0
div.child-2 的位置：絕對，z 索引：1
div.sibling 的位置：相對和z 索引： 2結果： div.sibling 將出現在兩個子 div 的前面，因為它在不同的堆疊上下文中具有更高的 z 索引。

以上是CSS z-index 如何控制 HTML 元素的堆疊順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！