为什么z-index不与这两个方块重合？[重复]

Question

这个问题在这里已经有了答案:

如何让相对位置的divs重叠？ (4个回答)

如何在css中重叠两个div？ (4个答案)

封闭 2个月前.

嗨，伙计们，我有这个代码

HTML:

        <div class="container">
            <div class="s1"></div>

            <div class="s2"></div>
        </div>

CSS:

        .container{
        border:1px solid;
        height:300px;
        width:300px;
        }
        .s1{
        position:relative;
        z-index:1;
        background-color:red;
        height:30px;
        width:30px;
        }
        .s2{
        position:relative;
        z-index:2;
        background-color:green;
        height:90px;
        width:90px;
        }

我想让绿色的方块与红色的方块重叠，但这是行不通的，谁能解释一下为什么？谢谢。

Answer 1

它们都是 position: relative. 尝试设置为 position: absolute;