Untitled

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title>ABCDE</title>
<style>
#grid {
        border : 1px dashed black;
        height : 400px;
        width  : 400px;
}
#grid div {
        outline    : 1px solid black;
        color      : white;
        font       : bold 20px sans-serif;
        text-align : center;
        position   : relative;
}
#A {
        background : #5080bb;
        margin  : 70% 0 0 0;
        height  : 30%;
        width   : 100%;
        z-index : 1;
}
#B {
        background : #7e64a0;
        margin : -100% 0 0 0;
        height : 40%;
        width  : 40%;

        z-index : 4;
}
#C {
        background : #f69447;
        margin : -40% 0 0 20%;
        height : 25%;
        z-index : 2;
}
#D {
        background : #99b959;
        margin : 35% 0 0 70%;
        height : 30%;
        z-index : 2;
}
#E {
        background : #be504e;
        margin : -70% 0 0 20%;
        height : 60%;
        width  : 60%;
        z-index : 3;
}
</style>
        </head>
        <body>
                <div id="grid">
                        <div id="A">A</div>
                        <div id="B">B</div>
                        <div id="C">C</div>
                        <div id="D">D</div>
                        <div id="E">E</div>
                </div>
        </body>
</html>