How to stack elements in CSS ?

Last Updated : 19 Sep, 2024

In CSS, stacking elements refers to controlling the vertical positioning of overlapping elements on a webpage. This is managed using the z-index property, where elements with higher z-index values are stacked above those with lower values, affecting their visual order in layers.

There are two methods to achieve this.

Table of Content

Using CSS position property
Using CSS Grids

Using CSS position property

The CSS position property approach uses position: absolute or relative to control element placement. When combined with the z-index property, elements can be stacked vertically. Elements with higher z-index values will appear above those with lower values.

Example : In this example we demonstrates how to stack elements using position: absolute and z-index. child1 with a higher z-index value stacks on top of child2, creating overlapping elements.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stacking Elements with Position and z-index</title>
    <style>
        .parent {
            position: relative;
            width: 400px;
            height: 300px;
            background-color: lightgray;
        }

        .child1 {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 150px;
            height: 150px;
            background-color: lightblue;
            z-index: 2;
            /* Stacks on top */
        }

        .child2 {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
            z-index: 1;
            /* Stacks behind */
        }
    </style>
</head>

<body>

    <div class="parent">
        <div class="child1">Child 1</div>
        <div class="child2">Child 2</div>
    </div>

</body>

</html>

Output:

Using CSS position property Example Output

Using CSS Grids

This approach uses CSS Grid to stack elements within the same grid area. By defining grid-area for both child elements, they overlap, with z-index determining the stacking order. The grid structure allows precise control of element positioning and layering.

Example: In this example we use CSS Grid to stack two child elements (child1 and child2) within the same grid area. The z-index property controls their stacking order, with child1 displayed above child2.

html

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: "Times New Roman", sans-serif;
            background: green;
            color: black;
            text-align: center;
        }

        h1 {
            color: black;
            font-weight: bold;
        }

        h2 {
            color: grey;
            font-weight: bold;
            padding: 25px 15px 20px;
            margin-bottom: 15px;
        }

        p {
            padding: 5px 10px;
        }

        .parentClass {
            display: grid;
            grid-template-rows: 150px 1fr;
            grid-template-columns: 250px 1fr;
            background: cyan;
            width: 80vw;
            margin: 8vw 10vw;
            height: 200px;
        }

        .childClass {
            opacity: 0.8;
            height: 150px;
            width: 190px;
            background: yellow;
            grid-area: 1 / 1 / 2 / 2;
            /* Stacks both children in the same grid area */
        }

        .child1 {
            z-index: 2;
            /* Ensures this child stacks on top */
        }

        .child2 {
            z-index: 1;
            /* Ensures this child is underneath */
        }
    </style>
</head>

<body>
    <div class="parentClass">
        <h1>Element 1</h1>

        <div class="childClass child1">
            <h2>Element 1.1</h2>
            <p>Stacked using CSS Grid</p>
        </div>
        <div class="childClass child2">
            <h2>Element 1.2</h2>
            <p>Stacked using CSS Grid</p>
        </div>
    </div>
</body>

</html>