CSS Layers

You can use CSS to add "layers" of elements, so that an element can sit in front or behind other elements.

In CSS, layers refer to applying the z-index property to elements that overlap with each other.

The z-index property, when used in conjunction with the position property, enables you to specify which element should appear on top in the event of an overlap. An overlap can easily occur when using the position property, and this is often desirable when creating advanced layouts.

Example code:

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    width: 80px;
    height: 100px;
    position: relative;
  }
  .infront {
    background-color: red;
    top: 10px;
    left: 80px;
    z-index: 2;
  }
  .behind {
    background-color: gold;
    top: -60px;
    left: 35px;
    z-index: 1;
  }
</style>


<div class="infront"></div>
<div class="behind"></div>

Layers with Opacity

You can use the opacity property to provide some transparency between the layers.

Here's an example.

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    width: 80px;
    height: 100px;
    position: relative;
  }
  .infront {
    background-color: red;
    top: 10px;
    left: 80px;
    z-index: 2;
    opacity: 0.3;
  }
  .behind {
    background-color: gold;
    top: -60px;
    left: 35px;
    z-index: 1;
  }
</style>


<div class="infront"></div>
<div class="behind"></div>