CSS 定位之 z-index 问题分析

下面是“CSS 定位之 z-index 问题分析”的完整攻略。

一、z-index 是什么

z-index 是 CSS 中用来设置元素在 z 轴上的层级关系的属性。它可以控制元素的垂直堆叠顺序，使一些元素覆盖其他元素。

二、z-index 的取值

z-index 属性可以接收以下值：

• 数字：取值范围为整数、负整数。数字越大，表示越靠近用户，也就是越显示在上层。
• auto：默认值，表示层叠顺序由元素的先后顺序决定。
• inherit：继承父元素的 z-index 值。

三、z-index 的使用

要使用 z-index 属性，必须将元素定位（position）为非 static，如：

.parent {
  position: relative;
}
.child-1 {
  position: absolute;
  z-index: 2;
}
.child-2 {
  position: absolute;
  z-index: 1;
}

在上述示例中，parent 的 position 属性设为 relative，表示它是 child-1 和 child-2 的相对定位父元素，而 child-1 和 child-2 的 position 属性设为 absolute，表示它们是绝对定位的元素。

由于 child-1 的 z-index 值为 2，而 child-2 的 z-index 值为 1，所以 child-1 会覆盖 child-2。

四、z-index 的问题

在实际应用中，有时可能会出现 z-index 不起作用的情况，这是因为：

1. 父元素未定位

如果一个元素未设置 position 属性（或设置为 static），它的 z-index 属性会被忽略。因此，如果想使用 z-index 来控制元素的层级关系，必须将其父元素设为相对定位或绝对定位。

2. 子元素 z-index 受限

如果一个子元素的 z-index 值大于其父元素的 z-index 值，也不能覆盖父元素下面的其他元素。这是因为子元素的 z-index 值不能超过其父元素的 z-index 值，即使子元素的 z-index 值很大，也无法覆盖它的父元素。

下面是一个示例，其中子元素的 z-index 值（100）大于父元素的 z-index 值（1），但它无法覆盖其下面的其他元素：

<div class="parent" style="z-index: 1;">
  <div class="child" style="z-index: 100;"></div>
</div>

五、z-index 的调试技巧

在调试 z-index 问题时，可以使用如下技巧：

1. 使用浏览器开发工具

打开浏览器开发工具（如 Chrome 的 DevTools），选择要检查的元素，在 Styles 标签页中查看其 z-index 值，以及其父元素和子元素的 z-index 值。这可以快速发现问题，例如某个元素的 z-index 值被错误地设为负数。

2. 使用透明背景调试

在开发过程中，可以先使用透明背景色来调试元素的层级关系。例如，可以将元素的背景色设为 rgba(0, 0, 0, 0.2)，这样它的内容仍然可见，而透明度可以帮助判断其 z-index 是否正确。

六、示例

下面提供两个示例：

1. 父元素未定位

<style>
  .parent {
    z-index: 1;
    border: 1px solid red;
  }
  .child {
    z-index: 2;
    position: relative;
    top: -20px;
    left: -20px;
    width: 60px;
    height: 60px;
    background-color: green;
    color: white;
    text-align: center;
    line-height: 60px;
  }
</style>
<div class="parent">
  <div class="child">Child Element</div>
</div>

在上述示例中，父元素未设置定位属性，因此 child 元素的 z-index 属性无效，无法超过父元素的 z-index 值，导致 child 元素不能覆盖父元素。

2. 子元素 z-index 受限

<style>
  .parent {
    height: 120px;
    width: 120px;
    background-color: red;
    z-index: 1;
    position: relative;
  }
  .child-1 {
    height: 60px;
    width: 60px;
    background-color: green;
    z-index: 2;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .child-2 {
    height: 60px;
    width: 60px;
    background-color: blue;
    z-index: 1;
    position: absolute;
    top: 40px;
    left: 40px;
  }
</style>
<div class="parent">
  <div class="child-1">Child Element 1</div>
  <div class="child-2">Child Element 2</div>
</div>

在上述示例中，child-1 元素的 z-index 值比 child-2 元素的 z-index 值大，但是由于 child-2 元素是 child-1 的兄弟元素，并且其父元素（parent）的 z-index 值是 1，所以 child-2 元素显示在 child-1 元素的上面。

总结

本文通过分析 z-index 属性的定义、取值、使用以及常见问题，总结了 z-index 属性的使用技巧和调试方法，同时提供了两个示例用于说明 z-index 属性在实际应用中的问题。