Typically, HTML pages are seen as two-dimensional, with text, images, and other elements placed on the page without overlapping. However, besides their horizontal and vertical positions, boxes can also be stacked along the z-axis, meaning one on top of another, by utilizing the CSS z-index property. This property determines the stacking level of a box when its position value is set to absolute, fixed, or relative.
Each layer's position on the z-axis is represented by an integer indicating the stacking order for rendering. An element with a higher z-index will overlap an element with a lower one.
Utilizing the z-index property allows you to create more intricate webpage layouts. Below is an example demonstrating how to create layers in CSS.
.box {
position: absolute;
left: 10px;
top: 20px;
z-index: 2;
}