z-index

by SELFHTML

HTML

<div id='element1'>Element mit z-index 2</div>
<div id='element2'>Element mit z-index 9</div>
<div id='element3'>Element mit z-index 0</div>
<div id='element4'>Element mit z-index -10</div>

CSS

div {     
    position: absolute; 
    padding: 1.5em; 
}
#element1 {
    top: 5em; left: 2em;
    z-index: 2;
    background-color: rgba(128, 128, 128, .6);
    padding-bottom: 5em;
}
#element2 {
    top: 8em; left: 4em; 
    z-index: 9; 
    background-color: rgba(0, 0, 255, .4); 
}
#element3 { 
    top: 11em; left:6 em; 
    z-index: 0; 
    background-color: rgba(255, 215, 0 , .8);
}
#element4 { 
    top: 9em; left: 10em;
    z-index: -10;
    background-color: rgba(128, 0, 0, 1);
    padding-left: 8em;
}