CSS Z-index layer overlap order

The div floats above another div:

"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; charset=gb2312"/> <title> Absolute Positioning relative positioning </title> <style>. fj1 {position:absolute;            width:150px;            height:150px; border:1px Solid # the; Background: #999;            }. zj1 {position:relative;            width:100px;            height:100px;            border:1px solid #F00;            Background: #FFF; Z-index:1; }    </style>class="fj1">I was on the bottom of the occurrence of a large--large with the disc included</div> <divclass="zj1">I float on top</div> </div></body>
div CSS Z-index layer overlap order
div layer, span layer and other HTML tag layer overlap Order Style z-index, usually we use less, but also will inevitably encounter CSS  z-index use. Next DIVCSS5 introduces Z-index from basic to set object stacking order, overlapping order, from basic grammar to application case tutorial to explain learning z-index.
First, Z-index grammar and structure
Z-index with specific numbers
Such as:
DIV{Z-INDEX:100}
Note : The value of Z-index is not the same as the unit.
The higher the number of z-index, the more forward, and the value must be both integers and positive numbers (integers with positive numbers).
Ii. Z-index conditions of Use
Z-index is used only when using the absolute positioning Position:absolute property condition. Usually we have different object boxes that overlap in different order, and we just want to z-index the style attributes.
Three, Z-index application case
To conveniently observe the Z-index style properties, we set up 3 div boxes, set different CSS background colors, set the same CSS height, CSS width. Set the background color to black, red, and blue, respectively. CSS width is 100px,css height of 50px
1. Case CSS Code

 
 

  
  
 
   
/* www.divcs5.com Z-index instance */
 
   
. divcss5{position:relative;}
 
   
. divcss5-1,.divcss5-2,.divcss5-3
 
   
{Width:100px;height:50px;position:absolute;}
 
   
. Divcss5-1{z-index:10;background: #000; left:10px;top:10px}
 
   
. Divcss5-2{z-index:20;background: #F00; left:20px;top:20px}
 
   
. Divcss5-3{z-index:15;background: #00F; left:30px;top:30px}
 
  
 
 
2. HTML code Snippet

 
 

  
  
 
   
<div class="divcss5-1"></div>      
 
   
<div class="divcss5-2"></div>     
 
   
<div class="divcss5-3"></div>     
 
  
 
 
 CSS Z-index layer overlap order