XaosCPS

<!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>