html - 为什么 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;
        }

我希望绿色方块与红色方块重叠，但这不起作用。有人可以解释我为什么吗？谢谢。

标签： htmlcssz-index

Answer 1

他们都是position: relative。尝试设置为position: absolute;