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

Demo Fiddle

您需要给cover 一个position 以使z-index 工作，例如

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

From MDN:

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

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

1. 框在当前堆叠上下文中的堆叠级别。
2. 框是否建立本地堆叠上下文。