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实际上是不可见的，直到单击一个按钮。此时，我希望推子使整个页面变黑，＃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;}

Answer 2

不，因为#form是在#wrapper的上下文中设置的。

如果你认为#fader，＃wrapper和＃form2是高速公路上的公共汽车，它们都可以相互通过，合并车道等。＃wrapper车辆中的乘客 - .content divs和#form - 使用#wrapper移动并可以在“总线”内移动，但它们被限制在其中。（根据您的CSS，＃form可能嵌套在.content的另一个上下文中，但这有点超出范围。）

你必须将#form从#wrapper移入正文，无论是动态地使用JavaScript事件还是页面加载。但无论如何，它不能在公共汽车上。

CSS z-index无法正常工作

2 个答案: