html - 如何使用 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>

Answer 1

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

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

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