CSS z-index Property - How does CSS z-index work

CSS layer refer to applying z-index property to element that overlap to another element.

CSS z-index property set a overlap value and base on overlap value to element positioning set from each other.

CSS z-index property always work with absolute as well as relative positioning value.

CSS z-index possible value 0, positive (1 to 9999) and negative (-1 to -9999) value to set an element.

Properties Value Description
z-index z-index:9999;     /* top most layer*/
z-index:1;
z-index:0;
z-index:-9999;   /* bottom last layer*/
Set z-index layer value to know how to overlap each other.

Example

 <!DOCTYPE html> <html> <head>   <title>CSS z-index property</title> </head> <body>   <div style="background-color:orange;     width:130px;     height:150px;     top:15px;     left:100px;      position:relative;     z-index:1;">   </div>   <div style="background-color:#FF3333;     width:130px;     height:150px;     position:relative;     top:-30px;     left:45px;     z-index:2;">   </div>   <div style="background-color:#CCFF66;     width:230px;     height:70px;     position:relative;     top:-270px;     left:145px;     z-index:3;">   </div> </body> </html>