CSS z索引工作不正常

假设我有以下几点：

<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>

废话
废话
表格在这里
表格在这里

现在#表单实际上在单击按钮之前是不可见的。在这一点上，我想让音量控制器遮住整个页面，然后显示#表单

我通过使用

位置：绝对

和正确的

z索引

来实现这一点。现在，#wrapper设置为低于#fader的z索引的z索引。我希望#form z-index高于#fader，但仍在#wrapper内！有什么办法可以这样做吗

---

谢谢

Z-index仅适用于定位元素

否，因为#表单是在#wrapper的上下文中设置的

如果你把#fader、#wrapper和#form2想象成高速行驶的公共汽车，它们都可以相互超车、合并车道等。在#wrapper车辆中的乘客-内容分区和#表单-与#wrapper一起移动，可以在“公共汽车”内移动，但他们被限制在里面。（根据您的CSS，#表单可能嵌套在.content的另一个上下文中，但这有点超出范围。）

---

您必须将#表单从#包装器移动到主体中，可以使用JavaScript事件动态移动，也可以在页面加载时移动。但无论如何，它都不可能在公共汽车上。

你好。我们没有足够的信息来处理。。。你有没有办法做一把小提琴（）？哇。单词太多，代码不够。拉小提琴！

#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;}