AlexZam solves the task

<style>
body{
    margin:10px;
}
#grid{
    height:100%;
    border:1px dashed black;
    position:relative;
    color:white;
    font:80px Arial;
}

#grid div{
    border:1px solid black;
    margin:0 1%;
    position:relative;
    text-align: center;
    vertical-align:middle;
}

div#A{
    background-color:#99f;
    height:30%;
    top:70%;
    margin-top:-20px;
    z-index:1;
}

div#B{
    background-color:#c9f;
    height:50%;
    width:48%;
    top:-30%;
    margin-top:36px;
    z-index:4;
}

div#C{
    background-color:#fc9;
    height:20%;
    width:60%;
    top:-80%;
    left:38%;
    margin-top:9px;
    z-index:1;
}
div#D{
    background-color:#9c9;
    height:30%;
    width:40%;
    top:-50%;
    left:58%;
    margin-top:8px;
    z-index:2;
}
div#E{
    background-color:#c99;
    height:40%;
    width:40%;
    top:-100%;
    left:28%;
    margin-top:8px;
    z-index:3;
}
</style>
<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>