CSS Layers

For creating an effect of layers like in Photoshop, you can use the CSS z-index property in conjugation with the position property.

Stacking Elements in Layers Using z-index Property

The HTML pages are usually considered two-dimensional because the text, images, and other elements are arranged on the page without overlapping. However, apart from their horizontal and vertical positions, boxes can also be stacked along the z-axis, i.e., one on top of the other, by using the CSS z-index property. This property defines a box's stack level whose position value is either absolute, fixed, or relative.

Each layer's z-axis position is expressed as an integer representing the stacking order for rendering. The element having a larger z-index overlaps the element with a lower one.

You can create more complex webpage layouts using a z-index property. The example given below shows how to create layers in CSS.

Example :

.box {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 2;
}

Try With Example