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

Question

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

与te以下风格

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

我知道我做错了什么,但我找不到我的愚蠢.

Answer 1

在position: relative元素上设置时,您将建立一个新的包含块.该块内的所有定位都与之相关.

在该块内的元素上设置z-index将仅相对于同一块内的其他元素更改其层.

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

Answer 2

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

Answer 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);
}