为什么 Z-Index 在固定定位上无法按预期工作？

z-index 不支持固定定位

在页面布局中，z-index 决定了网页上元素的堆叠顺序，较高的值出现在顶部。然而，当一个元素被固定定位时，似乎与直觉相反，很难使用 z-index 将其放置在静态定位的元素后​​面。

示例

考虑以下 HTML 和 CSS 代码：

<div>
<pre class="brush:php;toolbar:false">#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;
}

如示例所示，尽管更高z-index值分配给#over，固定定位元素#under保留在顶部。

解释

令人困惑的行为源于静态和固定之间的固有差异定位。

• 静态定位使元素不受 z-index 的影响，因为它们位于正常的流中文档。
• 固定定位，另一方面，从正常流程中删除元素并将它们相对于视口（用户的屏幕）定位。

在此上下文中，z-索引仅确定固定元素相对于其他固定元素的堆叠顺序

解决方案

要纠正此问题，请添加相对于静态定位元素的位置：。这会为 #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;
}