为什么 z-index 不能与固定定位元素一起使用？

z-index 不适用于固定定位：揭开原因

固定定位是创建保留在原位的元素的强大工具无论滚动如何，屏幕都会显示。但是，它有时会干扰 z-index 属性，该属性控制元素的堆叠顺序。

为了说明这一点，请考虑以下代码片段：

#over {
  width: 600px;
  z-index: 10;
}

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  border: 1px solid;
  height: 10%;
  background: #fff;
  z-index: 1;
}

正如您所期望的， #over 元素应该出现在 #under 元素上方，因为它具有更高的 z-index。然而，在这种情况下，#under 仍然覆盖#over。为什么会发生这种情况？

答案在于#over 的默认定位。默认情况下，元素具有静态定位，这意味着它们在文档流中占据其自然位置。另一方面，固定定位元素会从正常流中移除，并放置在相对于页面视口的特定坐标处。

在这种情况下，#under 的固定位置将其带出正常流，因此，它的 z-index 与静态定位的元素无关。为了让#under出现在#over后面，我们需要将#over的定位设置为relative。这会将 #over 放置在文档流中，但允许它根据指定的 z-index 移动其位置。

这是固定的代码片段：

#over {
  width: 600px;
  z-index: 10;
  position: relative;
}

#under {
  position: fixed;
  top: 14px;
  width: 415px;
  left: 53px;
  border: 1px solid;
  height: 10%;
  background: #f0f;
  z-index: 1;
}

现在，#under元素按预期出现在 #over 下面。请记住，为了使 z-index 正常工作，元素必须绝对或相对定位。

以上是为什么 z-index 不能与固定定位元素一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！