为什么我的固定位置元素出现在具有较高 z 索引的静态位置元素前面？

已解决的 z-index 问题：了解固定定位

尽管设置了 z-index，但有时制作固定定位元素可能会很困难出现在静态位置的后面。常见的解决方法是在静态元素上使用绝对定位。

要深入研究此行为，请考虑以下示例：

<div>

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

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  z-index: 1;
}

您会注意到，固定元素（z-index 1）保留在静态元素（z-index 10）前面。发生这种情况是因为默认情况下，静态定位元素没有堆叠上下文，这意味着它们不受 z-index 的影响。

要解决此问题，您可以通过添加相对于静态元素的位置来定义静态元素的堆叠上下文。这将创建一个新的 z-index 图层，其中 z-index 属性按预期运行。

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

现在，固定元素将按预期出现在静态元素后面。这个简单的调整可确保正确的 z-index 行为，使您能够有效地控制元素的分层。

以上是为什么我的固定位置元素出现在具有较高 z 索引的静态位置元素前面？的详细内容。更多信息请关注PHP中文网其他相关文章！