How to stack elements in CSS ? - GeeksforGeeks

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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to Upload Image into Database and Display it using PHP ?
Design a web page using HTML and CSS
How to apply style to parent if it has child with CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
HTML Cheat Sheet - A Basic Guide to HTML
REST API (Introduction)