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; }
如示例所示,尽管更高z-index值分配给#over,固定定位元素#under保留在顶部。
解释
令人困惑的行为源于静态和固定之间的固有差异定位。
在此上下文中,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; }
以上是为什么 Z-Index 在固定定位上无法按预期工作?的详细内容。更多信息请关注PHP中文网其他相关文章!