CSS z-index 如何控制 HTML 元素的堆叠顺序？

理解 z-index 堆叠顺序

使用 z-index 定位元素

CSS 中的 z-index 属性决定了定位元素的堆叠顺序。具体来说，它规定了哪些元素出现在 z 轴上其他元素的前面或后面，这表示三维平面上的深度。

对定位元素的影响

仅 Z 索引有效位于非静态位置（即绝对、相对、固定或粘性）的元素上。它不会影响具有静态位置的元素或使用浮动定位的元素。

堆叠上下文

当元素被定位并应用了 z-index 时，会创建堆叠上下文。在堆叠上下文中，z-index 属性设置定位元素及其后代的堆叠顺序。堆叠上下文可防止一个上下文中的元素干扰另一上下文中元素的堆叠顺序。

堆叠顺序规则

未指定 z-index 的元素的堆叠顺序如下：

1. 根元素的背景和边框
2. 非定位，非浮动块元素
3. 非定位浮动元素
4. 内联元素
5. 定位元素

当应用z-index属性时，堆叠顺序已修改：

1. 背景和边框根元素
2. z-index 小于 0 的定位元素
3. 非定位、非浮动块元素
4. 非定位浮动元素
5. 内联元素
6. z-index 为的定位元素0
7. z 索引大于 0 的定位元素

堆叠顺序示例

带或不带混合同级

位置：

• div.sibling-1 的位置：静态，z 索引：0
• div.sibling-2 的位置：绝对，z 索引：1

结果： div.sibling-2 将出现在前面div.sibling-1 因为它的 z-index 更高。

与同级

• ：
  • div.container 的位置：静态和 z-index： 0
  div.child-1 的位置：静态，z 索引：0
• div.child-2 的位置：绝对，z 索引：1

div.sibling 的位置：相对和 z 索引： 2

结果： div.sibling 将出现在两个子 div 的前面，因为它在不同的堆叠上下文中具有更高的 z 索引。

以上是CSS z-index 如何控制 HTML 元素的堆叠顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！