1. home
  2. Tutorials
  3. Tutorial
Edit

Layers with Opacity

The CSS layers refer to applying the z-index property to elements that overlap with each other.
The CSS opacity property represents the opacity level of an HTML tag. The opacity-level actually define the transparency-level of HTML tag. For example, if opacity value 0.5 then the transparent of element is 50%.

Example of Code

<style type="text/css">
  .div-12 {
    width: 80px;
    height: 100px;
    position: relative;
  }
  .infront-12 {
    background-color: red;
    top: 10px;
    left: 80px;
    z-index: 2;
    opacity: 0.5;
  }
  .behind-12 {
    background-color: gold;
    top: -60px;
    left: 35px;
    z-index: 1;
  }
</style>
<body>
    <div class="infront-12 div-12"></div>
    <div class="behind-12 div-12"></div>
</body>

Output