1 
<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 位于其父级的后面，如果可以，如何？

4

3 回答 3

5

是的，使用 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();
于 2012-04-05T14:24:26.790 回答
2

堆叠索引大部分时间都与兄弟姐妹相关，因此您不能使用z-index.

这是有关此的更多信息。

这是堆叠顺序：

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

Nick McCormackz-index: -1在他的回答中使用。这确实是您的感受所放弃的一个例外。请注意，将您的许多z-index: -1元素背后的元素移动到背景中。

浏览器差异

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

根据Smashing Magazine的说法，作为窗口控件的select元素自然具有更高的堆叠索引。

根据Shadowbox troubleElement选项，我认为object,embed并且canvas有同样的问题。

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

$('.close').hide();
于 2012-04-05T14:24:54.657 回答
0

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

简单的 jQuery：

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

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

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

于 2012-04-05T14:25:46.313 回答