How to stack elements in CSS ?

In order to create attractive and unique web pages, it is eventually required to add one element on top of the other, completely or just a section of it. There are two methods to achieve this.

  • Using CSS position property.
  • Using CSS grids.

Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            font-family: "Times New Roman", sans-serif;
            background: green;
            color: black;
            text-align: center;
        }
  
        h2 {
            font-weight: bold;
            padding: 0 10px;
            margin-bottom: 10px;
        }
  
        .parentClass {
            background: cyan;
            width: 80vw;
            margin: 8vw 10vw;
            height: 210px;
        }
  
        .firstchild {
            top: 0;
            left: 0;
        }
  
        .secondchild {
            top: 0;
            right: 0;
        }
  
        .childClass {
            position: absolute;
            opacity: 0.6;
            height: 150px;
            background: yellow;
            width: 200px;
  
        }
    </style>
</head>
  
<body>
  
    <div class="parentClass">
        <h2>I am Parent</h2>
        <div class="childClass firstchild">
            <h2>First Child </h2>
        </div>
  
        <div class="childClass secondchild">
            <h2>Second Child </h2>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:



To create a self-contained component that can be used in multiple places, you need a container inside another container such that the parent container changes relatively according to the child, you may use position: relative; on the parent element and position: absolute; on the child elements.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            font-family: "Times New Roman", sans-serif;
            background: green;
            color: black;
            text-align: center;
        }
  
        h2 {
            font-weight: bold;
            padding: 0 20px;
            margin-bottom: 15px;
        }
  
        p {
            padding: 15px 10px;
        }
  
        .parentClass {
            position: relative;
            background: cyan;
            width: 80vw;
            margin: 8vw 10vw;
            height: 200px;
        }
  
        .childClass {
            top: 0;
            left: 0;
            opacity: 0.7;
            width: 200px;
            height: 150px;
            background: yellow;
            position: absolute;
        }
    </style>
</head>
  
<body>
    <div class="parentClass">
        <h2>Element 1</h2>
        <div class="childClass">
            <h2>Element 2</h2>
            <p>position: absolute;</p><br>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 3: The same implementation can also be used to have two elements stacked on top of the parent element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            font-family: "Times New Roman", sans-serif;
            background: green;
            color: black;
            text-align: center;
        }
  
        h2 {
            font-weight: bold;
            padding: 10 20px;
            margin-bottom: 15px;
        }
  
        p {
            padding: 10px 10px;
        }
  
        .parentClass {
            position: relative;
            background: cyan;
            width: 80vw;
            margin: 8vw 10vw;
            height: 200px;
        }
  
        .childClass {
            opacity: 0.8;
            height: 150px;
            width: 190px;
            background: yellow;
            position: absolute;
            top: 0;
        }
  
        .child1 {
            left: 0;
        }
  
        .child2 {
            left: 155px;
        }
    </style>
</head>
  
<body>
    <div class="parentClass">
        <h2>Element 1</h2>
        <code>position: relative;</code>
        <div class="childClass child1">
            <h2>Element 1.1</h2>
            <p>position: absolute;</p><br>
        </div>
        <div class="childClass child2">
            <h2>Element 1.2</h2>
            <p>position: absolute;</p>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

Using CSS Grids: Another way of stacking elements is to use CSS grids. Grids can be used to place elements wherever required. Use the below code to do simple stacking of an element on top of the other.

filter_none

edit
close

play_arrow

link
brightness_4
code

.parentClass {
    grid-template-rows: 150px 1fr;
    grid-template-columns: 250px 1fr;
    display: grid;
}
 
.childClass {
    grid-area: 1 / 1 / 2 / 2;
}

chevron_right


Complete code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 {
            position: relative;
            background: cyan;
            width: 80vw;
            margin: 8vw 10vw;
            height: 200px;
        }
  
        .childClass {
            opacity: 0.8;
            height: 150px;
            width: 190px;
            background: yellow;
            position: absolute;
            top: 0;
        }
  
        .child1 {
            left: 0;
        }
  
        .child2 {
            left: 155px;
        }
  
        .parentClass {
            display: grid;
            grid-template-rows: 150px 1fr;
            grid-template-columns: 250px 1fr;
  
        }
  
        .childClass {
            grid-area: 1 / 1 / 2 / 2;
        }
    </style>
</head>
  
<body>
    <div class="parentClass">
        <h1>Element 1</h1>
  
        <div class="childClass child1">
            <h2>Element 1.1</h2>
            <p>position: absolute;</p><br>
        </div>
        <div class="childClass child2">
            <h2>Element 1.2</h2>
            <p>position: absolute;</p>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

If one child element is needed to be stacked on top of the other and both on top of parent element.

filter_none

edit
close

play_arrow

link
brightness_4
code

.parentClass {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 150px 1fr;
}
  
.childClass {
    grid-area: 1 / 1 / 2 / 2;
}
  
.child-2 {
    margin-left: 200px;
}

chevron_right


Complete code example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            font-family: "Times New Roman", sans-serif;
            background: green;
            color: black;
            text-align: center;
        }
  
        h2 {
            font-weight: bold;
            padding: 10 10px;
            margin-bottom: 5px;
        }
  
        .parentClass {
            display: grid;
            grid-template-columns: 250px 1fr;
            grid-template-rows: 150px 1fr;
            background: cyan;
            width: 80vw;
            margin: 8vw 10vw;
            height: 200px;
        }
  
        .childClass {
            grid-area: 1/1/2/2;
            opacity: 0.7;
            height: 150px;
            width: 250px;
            background: yellow;
        }
  
        .child2 {
            margin-left: 200px;
        }
    </style>
</head>
  
<body>
    <div class="parentClass">
        <h2>Element 1<br>
        </h2>
        <div class="childClass">
            <h2>Element 2.1</h2>
        </div>
  
        <div class="childClass child2">
            <h2>Element 2.2</h2>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.