CSS - Layers

In CSS, you can create layers of various divisions. CSS z-index property can be combined with the position property to create a layer effect.

The z-index property specifies the stacking order of an element. You can specify which element should come on top and which at bottom.

A z-index property can help you to create more complex webpage layouts.

CSS Layers - With z-index Property

The following example demonstrates how to create layers using z-index property. The elements with higher z-index value are positioned above the elements of lower z-index value −

<html>
<head>
<style>
   .box1 {
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: red;
      z-index: 1;
      padding: 3px;
      left: 10px;
      top: 10px;
   }
   .box2 {
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: lightblue;
      z-index: 2;
      padding: 5px;
      margin: 10px;
      left: 50px; 
      top: 30px;
   }
   .box3 {
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: yellow;
      z-index: 3;
      padding: 5px;
      margin: 20px;
      left: 80px; 
      top: 50px;
   }
   p {
      margin-top: 200px;
   }
</style>
</head>
<body>
   <p>The element with z-index value of 1 appears behind the elements with the z-index value of 2 and 3.</p>
   <div class="box1">
      CSS z-index: 1
   </div>
   <div class="box2">
      CSS z-index: 2
   </div>
   <div class="box3">
      CSS z-index: 3
   </div>
</body>
</html>

CSS Layers - Images and Text

The following example demonstrates how to create layers using z-index property. Higher z-index elements are positioned above lower z-index elements −

<html>
<head>
<style>
   img {
      height: 200px;
      width: 200px;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 2;
      margin: 5px;
   }
   h1 {
      margin-top: 30px;
      z-index: 1;
      color: red;
   }
</style>
</head>
<body>
   <img src="images/shop.png">
   <h3>Tutorialspoint</h3>
</body>
</html>

CSS Layers - Without z-index Property

The following example demonstrates how to create layers without using z-index property −

<html>
<head>
<style>
   .box1 {
      position: absolute;
      height: 210px;
      width: 210px;
      background-color: red;
      padding: 10px;
      left: 10px;
      top: 10px;
   }
   .box2 {
      position: absolute;
      height: 150px;
      width: 150px;
      background-color: lightblue;
      padding: 10px;
      margin: 10px;
      left: 30px; 
      top: 30px;
   }
   .box3 {
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: yellow;
      padding: 5px;
      margin: 10px;
      left: 60px; 
      top: 60px;
   }
</style>
</head>
<body>
   <div class="box1">
      Box 1
   </div>
   <div class="box2">
      Box 2
   </div>
   <div class="box3">
      Box 3
   </div>
</body>
</html>

Print Page