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>

Run it... »