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顺序决定哪一个   涵盖了另一个。具有较大z指数的元素通常覆盖一个   较低的元素。

     

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

     

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