Skip to content
Related Articles

Related Articles

How to stack elements in CSS ?
  • Last Updated : 10 Jul, 2020

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:




<!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>

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:




<!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>

Output:

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




<!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>

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.




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

Complete 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>

Output:

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




.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;
}

Complete code example:




<!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>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :