Default Stacking Order

Normal HTML Stacking Order Without Z-index

Positioned elements without any z-index property will be stacked based on their order in the HTML hierarchy, regardless of their position.
Standard (unpositioned) element blocks (DIV #5) in the normal flow are always rendered before positioned elements, and are stacked below them, even if the standard element comes later in the HTML hierarchy.

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 {
   height: 100px;
   position: relative;
   top: 30px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
   }
 
#reldiv3 {
   height: 100px;
   position: relative;
   top: 15px;
   left: 20px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
   }
 
#absdiv1 {
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   left: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
   }
 
#absdiv4 {
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   right: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
   }