HI WELCOME TO KANSIRIS

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.
PropertiesValueDescription
z-indexz-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>