CSS z-index Property - Playground Example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
   position: absolute; 
   width: 100px;
   height: 100px; 
   border: 1px solid black; 
   color: white;
}
.test1 {
   left: 15px; 
   top: 15px;
   background-color: red;
   z-index: -1; 
}
.test2 {
   left: 30px; 
   top: 35px;  
   background-color: blue;
   z-index: 3;  
}
.test3 {
   left: 45px; 
   top: 20px; 
   background-color: green; 
   text-align: right; 
   z-index: 2; 
} 
.test4 {
   left: 60px; 
   top: 60px; 
   background-color: sienna; 
   text-align: right; 
   z-index: 1; 
}
</style>
</head>
<body>
<div class="test1">-1</div> 
<div class="test2">3</div> 
<div class="test3">2</div> 
<div class="test4">1</div> 
</body>
</html>