将 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 将孩子放在其父母之后。

Here 提供更多相关信息。

这是堆叠顺序：

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

Nick McCormack 在他的回答中使用了z-index: -1。这确实是您的感受的一个例外。请注意z-index: -1 将您的许多元素后面的元素移至背景。

浏览器差异

除此之外，Internet Explorer 不支持负堆叠索引，并且对元素（子/父）位置非常严格。每个元素级别都有自己的堆叠上下文，因此必须通过父元素“通信”。见this explanation。

根据Smashing Magazine，select元素是一个窗口控件，自然有更高的堆叠索引。

根据ShadowboxtroubleElement选项，我推测object、embed和canvas有同样的问题。

---

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

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

Answer 3

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

简单的 jQuery：

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

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

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