如何在具有更高z-index的另一个元素的子元素前面获得具有较低z-index的元素的子元素？

Question

我有以下设置：

<div style="z-index: 10">
      <div>Whatever</div>
</div>

<div style="z-index: 9">
      <div><div>Haaaleluia</div></div>
</div>

当然......我过度简化了设置，但这是主要的想法。 “无论”div与“Haaaaleluia”div重叠。当然因为第一个父母有更大的z-index“无论什么”是可见的而“haaaleluia”不是。

如果不改变设置（并且要明确包括保留父母的z索引），我怎样才能让“Haaaaleluia”成为最佳人选？

对于那些要求打印的人来说，这也是...也谢谢你的帮助：

大坏图是第二个div。

本教程是第一个div。

带订单的面板是地图的子项。我需要它在顶部。如果我将整个地图设置在顶部，则该教程不再可见。如果我将地图保留在订单面板后面，则不再可见。

Answer 1

简而言之：你做不到。不能让父元素的子元素比兄弟元素低z-index，并且为该子元素提供比父元素更高的z-index值，因为继承的z-index相对于父元素（对于遇到同样事情的人，请参阅this question。

但是，根据您的设置，您可以完全删除z-indices，然后让浏览器将您的div置于下方。然后，您可以只给孩子一个z-index值。

Answer 2

在不更改位置，z-index或重新排列任何元素的情况下，我能想到的唯一方法是允许下方的div出现更改{{1} } {，visibility或display与您要查看的opacity重叠。

也就是说，在“Whatever”的父div上使用以下CSS样式之一：

div

您基本上要求在另一个具有较高visibility: hidden; display: none; opacity: 0; 的元素上方显示元素，这会使z-index的目的失效。如果您试图控制元素重叠的方式，那么确实应该使用z-index来完成。我建议你重新考虑你的元素是如何组织的（可能将“Haaaleluia”z-index移到其父级之外并为其分配自己的div）。否则，我可能会建议您考虑创建一个“Haaaleluia”的副本，以显示在“Whatever”之上，这可能适合您的情况，也可能不适合您的情况。

编辑：查看您提供的图片，将订单框的父级更改为教程div的父级可能对您有用。这是一个使用jQuery的demo，它可以帮助说明这一点 - 只需将悬停事件更改为启动教程的任何内容即可。另一个选项可能是克隆订单框以放置在下面的订单框之上，但具有更高的z-index（以便用户只看到一个，但克隆重叠其他所有内容）。这假设您的地图div绝对或相对定位。希望有所帮助。

Answer 3

漂亮的设计。

好的，我首先要说的是，我相信你的分层问题的解决方案正如其他人已经建议的那样，正在将该框移到其父级（地图）之外。

但是你设置了一些约束，所以我会尝试尽可能少地打破。我不知道如何在不破坏任何限制的情况下执行此操作。 Z-index是继承的（再次，其他人已经指出了这一点），所以你不能只用那个工具打破你父母的层。

所以这是使用javascript获得相同效果的一种方式。它很丑陋，可能会让你后来更头疼，但它至少应该起作用：

1. 找出想要放在顶部的div的绝对位置。
2. 复制一份。
3. 隐藏原件（如果不透明则可选）。
4. 将副本插入所有内容。

如果您正在使用jQuery，则可以使用.offset()函数获取元素相对于文档的位置。之后就相当简单了：

$(document).ready( function() {

    $("a[href='#overlay']").click( function() {
        // 1: get the position
        pos = $('.wrap').offset();
        // 2: make a copy
        halecopy = $('.bottom .wrap').clone();
        // 3: hide the original
        $('.bottom .wrap').css({opacity: 0});
        // 4: Insert new label on top of everything
        $('body').prepend(halecopy);
        // position the new label correctly
        halecopy.css({position:'absolute',
                      top: pos.top,
                      left: pos.left,
                      'z-index': 2});
        // show the "top" layer
        $('.top').fadeIn();
    });

    $("a[href='#hide']").click( function() {
        $('.top').fadeOut( function() {
            // remove the label copy
            halecopy.remove();
            // show the original again
            $('.bottom .wrap').css({opacity: 1});
        });
    });

});​

该脚本适用于此标记：

<div class="top">
    <div class="label">
        <p>Whatever</p>
    </div>
</div>

<div class="bottom">
    <div class="wrap">
        <div class="label">
            <p>Haaaleluuuuia!</p>
        </div>
    </div>
</div>

<a href="#overlay">show</a>
<a href="#hide">hide</a>​

使用这些样式：

.top,
.bottom {
    position: absolute;
    top: 10%;
    left: 3%;
}

.top {
    z-index: 1;
    padding: 2%;
    background: rgba(0, 127, 127, 0.8);
    display:none;
}

.bottom {
    z-index: -1;
    padding: 3%;
    background: rgba(127, 127, 0, 0.8);
}

.label {
    color: #fff;
}

.wrap {
    outline: 1px dashed rgba(127, 0, 0, 0.8);
    background: rgba(127, 127, 127, 0.8);
}

.bottom .label {
    z-index: 10;
}
​

这是一个handly jsfiddle demo。

Answer 4

为div添加颜色以演示分层：

<div style="position:absolute;background:blue;z-index: 10">
      <div>Whatever</div>
</div>

<div style="position:absolute;background:red;z-index: 11">
      <div><div>Haaaleluia</div></div>
</div>

Answer 5

这只是一个可行的想法。

1. 使用jquery获取具有z-index = 9的div。
2. 然后选择具有z-index的div的第1个孩子的第1个孩子为9。
3. 然后按如下方式应用样式：

$(element which you got).attr("style", "position: absolute; z-index: 12;")

该样式将应用于小元素，它将在红色框中显示。