5

我有以下设置：

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

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

当然......我过度简化了设置，但这是主要思想。“whatever” div 与“Haaaaleluia” div 重叠。当然，因为第一个父级的 z-index 更大，所以“whatever”是可见的，而“haaaleluia”不是。

在不更改设置的情况下（并且要明确包括保留父 z-indexes），我怎样才能使“Haaaaleluia”处于顶部？

对于那些在这里要求打印的人......也感谢您的帮助： 在此处输入图像描述

大坏地图是第二个div。

本教程是第一个 div。

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

4

5 回答 5

8

简而言之：你不能。由于继承的 z-index 是相对于父元素的，因此不可能有一个z-index低于兄弟元素的父元素的子元素，并为该子元素赋予比父元素的兄弟元素更高的 z-index 值（请参阅this question for someone遇到同样的事情）。

但是，根据您的设置，您可以完全删除 z 索引，并让浏览器将您的顶部div放在下面的上方。然后，您可以只给孩子一个z-index价值。

Josh Comeau 有一篇很棒的文章深入探讨了这个问题和各种解决方案/变通方法。

于 2012-07-04T13:59:25.787 回答
2

在不更改位置 、z-index或重新排列任何元素的情况下，我能想到的唯一让div下方出现的方法是更改visibility​​ 、display或您想要看到opacity的重叠部分。div

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

visibility: hidden;
display: none;
opacity: 0;

您基本上是要求在另一个具有更高 的元素上方显示一个元素z-index，这违背了拥有z-index. 如果你想控制元素如何重叠，真的应该用z-index. 我建议你重新考虑你的元素是如何组织的（也许将“Haaaleluia”移到div其父级之外并分配它自己的z-index）。否则，我可能会建议您考虑创建“Haaaleluia”的副本以显示在“Whatever”上方，这可能适合您的情况，也可能不适合您的情况。

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

于 2012-07-04T14:10:09.827 回答
2

不错的设计。

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

但是你设置了一些限制，所以我会尽量少打破。我不知道如何在不破坏任何约束的情况下做到这一点。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;
}
​

这是一个方便的jsfiddle 演示。

于 2012-07-04T15:05:12.447 回答
0

为 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>
于 2012-07-04T13:40:07.730 回答
0

这只是一个可行的想法。

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

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

该样式将应用于小元素，并将在红色框上可见。

于 2012-07-04T14:43:30.203 回答