Jul 9, 2023

CSS Layers

The CSS z-index property can be used in conjugation with the position property to create an effect of layers like Photoshop.

Stacking Elements in Layers Using z-index Property

Usually HTML pages are considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. However, in addition to their horizontal and vertical positions, boxes can be stacked along the z-axis as well i.e. one on top of the other by using the CSS z-index property. This property specifies the stack level of a box whose position value is one of absolute, fixed, or relative.

The z-axis position of each layer is expressed as an integer representing the stacking order for rendering. An element with a larger z-index overlaps an element with a lower one.

A z-index property can help you to create more complex webpage layouts. Following is the example which shows how to create layers in CSS.

Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example of CSS Layers Effect</title>
        <style>
            .container{
                position: relative;
            }
            .box{
                width: 150px;
                height: 150px;
                opacity: 0.9;
                position: absolute;
            }
            .red{
                background: #ff0000;
                z-index: 1;
            }
            .green{
                top: 30px;
                left: 30px;
                background: #00ff00;
                z-index: 2;
            }
            .blue{
                top: 60px;
                left: 60px;
                background: #0000ff;
                z-index: 3;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box red"></div>
            <div class="box green"></div>
            <div class="box blue"></div>
        </div>
    </body>
</html>