6

我正在尝试调整某些元素的堆叠顺序；这是一个SSCCE。

鉴于此 HTML 片段：

<div id="block1">
    <div>Lorem ipsum dolor.</div>
    <div id="widget">
        <div>Widgety goodness!</div>
    </div>
</div>
<div id="block2">
    <div>Lorem ipsum dolor.</div>
</div>
<div id="block3">
    <div>Lorem ipsum dolor.</div>
</div>

我正在尝试显示#widget在#block2; 使用以下 CSS，您会发现在不更改#widget节点树中的位置的情况下会出现问题。

#block1, #block2, #block3 {
    position: relative;
    min-height: 50px;
    width: 100%;
}
#block1, #block3 {
    background-color: #abc;
    color: #123;
    z-index: 1;
}
#block2 {
    background-color: #def;
    color: #456;
    z-index: 2;
}
#widget {
    background-color: #f00;
    position: absolute;
    z-index: 999;
    left: 200px;
    top: 40px;
}

正如您在小提琴中看到的，与;#widget部分重叠 #block2这很有意义，因为父#block1级在堆叠顺序中的兄弟级中较低。

显而易见的答案是：制作#widget的孩子#block2，但不幸的是，这不是这里的解决方案。此外，#blockN不能z-index修改元素的相对值；块 1 和 3 必须小于 2。（我的意思是计算的值可能不同，但#block2总是大于它的兄弟姐妹）。原因在于box-shadow分层。

是否有任何合理的（阅读：跨浏览器、IE7+）方法可以#widget从它的堆叠上下文中删除，同时保留它的位置、坐标位置、尺寸等？

使用fixed定位可以根据需要删除它，但是它也获得了固定的所有视觉属性（这使其成为非解决方案）

我认为这可能已经以迂回的方式回答了，但是我没有找到。另外，道歉；看来我在最初的帖子中可能遗漏了一些无害但关键的细节。我想我现在已经涵盖了所有内容。

4

3 回答 3

4

您的规则并没有真正应用于您希望它们应用到的元素。您需要在要定位的元素上显式设置 z-index，在您的情况下，该元素是 block2 的 div 子元素。通过简单地修改第一个选择器：

#block1, #block2 , #block3 {

至

#block1, #block2 div, #block3 {

您的堆叠顺序已更正。您的 z-index 规则正在应用于父母，而孩子继续使用默认的 auto。在您的情况下，通过在 #block2 div 上设置位置，您可以让您的小部件位于 block2 子 div 的顶部。

jsFiddle 示例

于 2013-08-19T02:13:45.823 回答
1

我猜你不需要改变#widget. 在我看来，答案在于你的问题本身。看一下这个

编辑的CSS：

#block1{
    background-color: #abc;
    color: #123;
    z-index:3;
}

#block3 {
    background-color: #abc;
    color: #123;
    z-index:1;
}
于 2013-08-19T02:04:03.357 回答
1

一个可行的解决方案是使用positiondiv 的堆叠顺序，而不是在此处使用 z-index。因此不会形成不需要的堆叠上下文。

块 1 和 3 获取默认值position: static

第 2 块得到position: relative（超过 1 和 2）

并且只有小部件有一个 z-index，它将它移动到它之上！

http://jsfiddle.net/4eENM/

于 2014-03-13T10:19:10.607 回答