#example-element {
    top: 15px;
    left: 15px;
    width: 180px;
    height: 230px;
    position: absolute;
    /* center the text so it is visible even when z-index is set to auto */
    line-height: 215px;
    font-family: monospace;
    background-color: #fcfbe5;
    border: solid 5px #e3e0a1;
    z-index: auto;
}

.container {
    display: inline-block;
    width: 250px;
    position: relative;
}

.block {
    width: 150px;
    height: 50px;
    position: absolute;
    font-family: monospace;
}

.blue {
    background-color: #E5E8FC;
    border: solid 5px #112382;
    /* move text to the bottom of the box */
    line-height: 55px;
}

.red {
    background-color: #fce5e7;
    border: solid 5px #e3a1a7;
}

.position1 {
    top: 0;
    left: 0;
    z-index: 6;
}

.position2 {
    top: 30px;
    left: 30px;
    z-index: 4;
}

.position3 {
    top: 60px;
    left: 60px;
    z-index: 2;
}

.position4 {
    top: 150px;
    left: 0;
    z-index: auto;
}

.position5 {
    top: 180px;
    left: 30px;
    z-index: auto;
}

.position6 {
    top: 210px;
    left: 60px;
    z-index: auto;
}
