Question

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

.content-wrapper相对定位并包含所有页面内容（不仅仅是弹出窗口）。

.popup绝对定位。

.close也绝对定位。

当光标进入弹出窗口时，我有一些javascript移动关闭（所以我有一个很好的关闭栏出现在侧面）。我发现这样做的最好方法就是使用jQuery动画。隐藏/显示甚至会造成口吃效果.stop（）无法解决。我的问题是试图将.clop隐藏在.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是关于此的更多信息。

这是堆叠顺序：

当前堆叠上下文的边框和背景
具有负z-index
未定义z-index属性的非定位块级后代 - 段落，表格，列表等
浮动后代及其内容
非定位内联内容
没有z-index，z-index：auto或z-index的定位后代：0
z-index大于0

Nick McCormack在答案中使用了z-index: -1。这确实是你的感受的一个例外。请注意z-index: -1将元素许多元素移动到后台。

浏览器差异

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

根据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上做了什么。

隐藏其父母背后的div？

3 个答案:

浏览器差异