如何使用 z-index 进行相对定位？答案

【问题标题】：how to use z-index with relative positioning?如何使用 z-index 进行相对定位？
【发布时间】：2012-02-17 15:42:50
【问题描述】：

z-index 和我的代码有问题。我想在每一行上都有一个弹出窗口，相对于该行定位。所以我创建了这段代码：

<div class="level1">
    <div class="level2">
        <input type="text" value="test1" />
        <div class="popup">test1</div>
    </div>
    <div class="level2">
        <input type="text" value="test2" />
        <div class="popup">test2</div>
    </div>
</div>

有以下风格

.level1
{
    position:relative;
    z-index:2;
}
.level2
{
    position:relative;   
    z-index:3;
}
.popup
{
    position:absolute;
    left:0px;
    top:10px;
    width:100px;
    height:100px;
    background:yellow;
    z-index:4;
}

【问题讨论】：

您看到的问题是什么？ .level1 的高度不适合.popup？ .popup 出现在什么东西后面？
css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

标签： html css css-position z-index

【解决方案1】：

当你在一个元素上设置position: relative 然后你建立一个新的包含块。该块内的所有定位都是相对于它的。

在该块内的元素上设置 z-index 只会相对于同一块内的其他元素改变其层。

我不知道有任何变通方法。

【讨论】：

【解决方案2】：

尝试将负值的 z-index 添加到后面的 div 中

【讨论】：

哇...我没想到这会做任何事情，但它完全解决了我的问题。谢谢！
好把戏。从来没有想过使用 -ve value zindex 的 :-)

【解决方案3】：

您可以将z-index 与relative 位置结合使用。您只需要指定position: relative。如果你真的想让它看起来像弹出一样，我建议使用box-shadow

.popup {
    position:relative;
    left: 0px;
    top: 10px;
    width: 100px;
    height: 100px;
    background:yellow;
    z-index: 4;

    -webkit-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -moz-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -ms-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -o-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
}

【讨论】：

【解决方案4】：

Z-Index 是一种规则顺序，其结果仅在两个或多个元素重叠时可见。这意味着，如果您希望在绝对位置具有相同的 z-index 行为，则需要使它们重叠。相对位置不会使它们重叠，因此例如在此示例中，要使这两个 div 重叠，我必须将第二个的顶部设置为 -50px。

  <div style="background-color: blue; width: 500px; height: 100px; position: relative">
    <div style="background-color: red; width: 50px; height: 50px; position: relative; z-index: 1;  top: 0px"></div>
    <div style="background-color: yellow; width: 50px; height: 50px; position: relative; z-index: 0; top: -50px"></div>  
  </div>

【讨论】：

这个答案完全不正确。 z-index 适用于任何定位元素。 “重叠”与它无关。
你说得对，技术上总是应用，但你只会在重叠时看到结果。