why z-index don't overlap these 2 squares?

Question

hi guys i have this code

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

I want the green square overlap the red square, but this not works. Can someone explain me why? Thanks.

Answer 1

They're all position: relative. Try setting to position: absolute;