Home » CSS » 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.
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;
}