如何使用 z-index 相对定位？

Question

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

    .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;
    }

 <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>

原文由 Chris Vaarhorst 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

我不知道有任何解决方法。

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议