为什么 z-index 不与这两个方块重叠？

Question

大家好，我有这个代码

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;