Playing with Positioning

by cliftonyeo

HTML

<div id="div1" class="pane"></div>

<div id="div2" class="pane"></div>

<div id="div3" class="pane"></div>

CSS

.pane {
    height: 100px;
    width: 100px;
    background: grey;
    border:1px solid white;   
    position: absolute;
    
    /*display:inline-block;  --> to make it display in a line, instead of stacking*/
    
}

#div3 {
    z-index: 0; 
    background: rgba(0,255,0,0.5);
}

#div1 {
    left: 25px;
    top: 25px;
    z-index:5;
    background: rgba(255,0,0,0.5);
}

#div2 {
    left: 50px;
    top: 55px;
    z-index: 10;   
    background: rgba(0,0,255,0.5);
}