CSS Layers

It is a concept of layering in which we can control the stacking of different layers over each other. This can be achieved using z-index property.

The z-index property is used along with the position property to create an effect of layers. We can specify which element should come on top and which element should come at bottom.

Position value can be relative, absolute or fixed as per the design need. It also helps to create more complex web layouts.

This z-index has number as its value and stacking can be controlled by increasing in number value. Below illustrate the use of z-index:-

Input:-

Index.html
	
<body> 
	 <div class="layer1">
         Layer 1 - Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
  <div class="layer2">
         Layer 2 - Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	 </div>
</body>

Style.css
.layer1 {
    background: #ccc;
    z-index: 9;
    position: absolute;
    top: 0;
}
.layer2 {
    background: #ddd;
	   z-index: 99;
    position: absolute;
    top: 0;
}

Output:-