为什么 z-index 不影响固定位置的元素？

固定位置的元素不受 z-index 影响

在 CSS 中，z-index 属性控制元素在页面，较高的值将元素移动到最前面。然而，有时固定定位的元素似乎不受 z-index 变化的影响。

此行为是由固定元素的默认静态定位引起的。当具有固定定位的元素放置在具有默认定位的另一个元素中时，它会在该元素内创建一个堆叠上下文。在此上下文中，固定元素位于任何其他元素之上，无论其 z-index 如何。

要解决此问题，您可以向父元素添加相对定位。这会在父级中建立一个新的堆叠上下文，从而使固定元素的 z-index 生效。

示例：

考虑以下 HTML 和 CSS：

<div>

#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;
}

在这种情况下，#under 元素将保留在 #over 元素的顶部，即使尽管后者具有更高的 z-index。要解决此问题，请向 #over 元素添加相对定位：

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

现在，#under 元素的 z 索引将按预期工作，将其放置在 #over 元素后面。

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