html5-相对定位

*{
    margin: 0px;
    padding: 0px;
}
div{
    width: 300px;
    height: 300px;
}
#div1{
    background: rgba(255,0,0,0.5);
    position: relative;
    left: 50px;
z-index: 2
}
#div2{
    background: rgba(0,255,0,0.5);
    position: relative;
    left: 150px;
    top: -100px;
    z-index: 3
    
}
#div3{
    background: rgba(0,0,255,0.5);
    position: relative;
    left: 300px;
    top: -300px;
    z-index: 1
}

/*
#div1{
    background: rgba(255,0,0,0.5);    
    position:fixed;
    left: 100px;
}
#div2{
    background: rgba(0,255,0,0.5);
    position:absolute;
    left: 200px;
}
#div3{
    background: rgba(0,0,255,0.5);
    position: absolute;
    left: 300px;
}*/