将 div 隐藏在其父级后面

Question

<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>

.content-wrapper 的位置相对合适，包含所有页面内容(不仅仅是弹出窗口(。

.popup 是绝对定位的。

.close也是绝对定位的。

当光标进入弹出窗口时，我有一些 javascript 可以靠近(所以我有一个很好的关闭栏出现在侧面(。我发现最好的方法是使用 jQuery animate 移动。隐藏/显示会产生卡顿影响，即使 .stop(( 也无法解决。我的问题是试图将 .close 隐藏在 .popup 后面。无论我为两个div 设置了什么 z-index，.close 都不会位于 .popup 后面。

是否有可能在另一个绝对定位的div 中有一个绝对定位的div 位于其父级后面，如果是这样，如何？

Answer 1

是的，使用 z-index： http://jsfiddle.net/tGd4Q/

.HTML：

<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>​

.CSS：

.popup, .close { position: absolute; height: 200px; width: 200px; }
.popup { background: #f00; }
.close { background: #ff0; top: 25px; left: 25px; z-index: -1; }​

不过，这不适用于IE7标准。我建议使用 jQuery(或您选择的其他框架(来隐藏div：

$('.popup .close').hide();

Answer 2

堆叠索引大部分时间是相对于同级的，因此您不能使用 z-index 将子项放在其父项后面。

以下是有关此内容的更多信息。

这是堆叠顺序：

1. 当前堆叠上下文的边框和背景
2. 具有负 z 指数的定位后代
3. 未定义 z-index 属性的非定位块级后代 -- 段落、表、列表等
4. 浮动后代及其内容
5. 非定位内联内容
没有 z 索引、z 索引
6. ：auto 或 z 索引的定位后代：0
7. z 指数大于 0 的定位后代

尼克·麦科马克(Nick McCormack(在他的回答中使用了z-index: -1。这确实是你感情所屈服的一个例外。请注意，z-index: -1会将许多元素后面的元素移动到背景中。

浏览器差异

除此之外，Internet Explorer不支持负堆叠索引，并且对元素(子/父(位置非常严格。每个元素级别都有自己的堆叠上下文，因此必须通过父元素"通信"。请参阅此说明。

根据Smashing Magazine的说法，select元素是一个窗口控件，自然具有更高的堆叠指数。

根据Shadowbox troubleElement选项，我认为object，embed和canvas有相同的问题。

---

如果你想隐藏.close，你为什么不真正隐藏它而不是把它移到.popup后面？

$('.close').hide();

Answer 3

不，您将无法将其放在其父级后面。 但是，您可以将其显示模式更改为无，因此根本看不到它。 然后，当您需要查看div 时，将其更改为显示。

简单的jQuery：

$('.close').hide();
$('.close').show();

还有其他方法，例如添加带有 display:none 或 display: inline-block 作为设置的样式属性。

更新：根据其他答案中的评论，有一种方法可以使用 z-index 来做到这一点。 仍然认为隐藏/展示是要走的路。 非常清楚你在UI上做什么。