CSS z-index 无法正常工作

Question

假设我有以下内容:

<div id="fader"></div>
<div id="wrapper">
    <div class="content">Blah Blah</div>
    <div class="content">Blah Blah</div>
    <div class="content">
         <div id="form">form goes here</div>
</div>
<div id="form2">Form goes here</div>

现在 #form 实际上是不可见的，直到单击一个按钮。那时，我希望 fader 将整个页面涂黑，然后显示 #form。

我通过使用 position: absolute 和正确的 z-index 来实现这一点。现在，#wrapper 设置为低于#fader 的 z-index 的 z-index。我希望#form z-index 高于#fader，但仍位于#wrapper 内!有办法做到这一点吗？

谢谢

Answer 1

Z-index 仅适用于定位元素。

http://jsfiddle.net/sSKZS/1/

#wrapper {z-index: 1; position: relative;}
#fader {z-index: 2; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#form2 {z-index: 3; position: absolute;}