CSS：用 z-index 覆盖固定元素

Question

HTML：

<div class="wrap">
    <div class="fixed"></div>
</div>
<div class="cover"></div>

CSS：

.cover{z-index: 10;} 
.wrap{position: relative; z-index: 1;} 
.fixed{position: fixed; display: block; z-index: 1;}

示例：http : //jsfiddle.net/6fq8L/

在页面滚动 .cover 元素隐藏在 .fixed 元素后面，尽管它的 z-index 属性更高。如何在 .wrap 和 .fixed 元素上方显示 .cover 元素，以便在滚动页面时覆盖它们？

Answer 1

演示小提琴

你需要给cover一个position用于z-index工作，如

.cover{z-index: 10;position:relative;} 

来自 MDN：

z-index CSS 属性指定元素及其后代的 z 顺序。当元素重叠时，z-order 确定哪一个覆盖另一个。具有较大 z-index 的元素通常会覆盖具有较低 z-index 的元素。

对于定位框，z-index 属性指定：

1. 当前堆叠上下文中框的堆叠级别。
2. 盒子是否建立了局部堆叠上下文。