Altered Stacking Order Using Z-index

Stacking Order Using Z-index

Since DIV #5 is not positioned, it exists on layer 0 (zero), the furthest away from the observer in this example.
The z-index values have been applied to the remaining four positioned elements so that those which were on the bottom of the stack by default are now on the top, and vice versa. Compare this popup example side-by-side with the previous example showing the default stacking order.

DIV #1
position: absolute;

DIV #2
position: relative;

DIV #3
position: relative;

DIV #4
position: absolute;

DIV #5
no positioning

#normdiv5 {
   height: 70px;
   border: 1px dashed #999966;
   background-color: #ffffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
   }
 
#reldiv2 {
   z-index: 3;
   height: 100px;
   position: relative;
   top: 30px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
   }
 
#reldiv3 {
   z-index: 2;
   height: 100px;
   position: relative;
   top: 15px;
   left: 20px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
   }
 
#absdiv1 {
   z-index: 4;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   left: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
   }
 
#absdiv4 {
   z-index: 1;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   right: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
   }