0

说我有以下内容：

<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 内！有没有办法做到这一点？

谢谢

4

2 回答 2

2

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;}
于 2013-02-08T03:06:36.033 回答
0

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

如果您将#fader、#wrapper 和#form2 视为在高速公路上高速行驶的公共汽车，它们都可以相互超越、合并车道等。#wrapper 车辆中的乘客——.content div 和#form——随着移动#wrapper 并且可以在“公共汽车”内移动，但它们被限制在其中。（根据您的 CSS，#form 可能嵌套在.content 的另一个上下文中，但这有点超出范围。）

您必须将#form 从#wrapper 移到正文中，要么通过JavaScript 事件动态地进行，要么在页面加载时进行。但无论哪种方式，它都不能在公共汽车上。

于 2013-02-08T03:23:28.753 回答