How to Make Flex Items Overlap with CSS Flexbox?

Last Updated : 31 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In CSS FlexBox, items can be arranged in any layout with great flexibility and control. One interesting effect that can be done is overlapping flex items. This can be done using different techniques such as negative margins and absolute positioning, allowing for creative and visually appealing designs.

Below are the possible approaches:

Table of Content

Using Negative Margins

In this approach, we are using negative margins to create an overlapping effect for the flex items. Each card has a margin-left: -20px, causing them to overlap horizontally. The first card's negative margin is reset to zero to maintain its original position.

Example: The below example uses Negative Margins to Make Flex Items Overlap with CSS Flexbox.

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

<head>
    <style>
        h1 {
            color: green;
            text-align: center;
            font-size: 24px;
        }

        h3 {
            text-align: center;
            font-size: 20px;
            margin-bottom: 20px;
        }

        .cards {
            display: flex;
            max-width: 300px;
            margin: 0 auto;
        }

        .card {
            width: 50px;
            height: 90px;
            border: 1px solid black;
            border-radius: 3px;
            background-color: rgba(255, 0, 0, 0.4);
            margin-left: -20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: black;
        }

        .card:first-child {
            margin-left: 0;
        }
    </style>
    <title>Overlapping Flex Items</title>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Approach 1: Using Negative Margins</h3>

    <div class="cards">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
        <div class="card">4</div>
        <div class="card">5</div>
        <div class="card">6</div>
        <div class="card">7</div>
        <div class="card">8</div>
        <div class="card">9</div>
    </div>

</body>

</html>

Output:

Using absolute position

In this approach, we are using absolute positioning to create overlapping effects for the flex items. Each icon is positioned absolutely within the flex container and given specific left values to control its horizontal placement. The z-index property ensures that the icons stack in the correct order.

Example: The below example uses Positioning to Make Flex Items Overlap with CSS Flexbox.

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

<head>
    <style>
        h1 {
            color: green;
            text-align: center;
            font-size: 24px;
        }

        h3 {
            text-align: center;
            font-size: 20px;
            margin-bottom: 20px;
        }

        .icons {
            display: flex;
            max-width: 300px;
            position: relative;
            margin: 0 auto;
        }

        .icon {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            border-radius: 50%;
            background-color: rgba(0, 0, 255, 0.4);
            position: absolute;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: black;
        }

        .icon:nth-child(1) {
            left: 0;
            z-index: 10;
        }

        .icon:nth-child(2) {
            left: 30px;
            z-index: 9;
        }

        .icon:nth-child(3) {
            left: 60px;
            z-index: 8;
        }

        .icon:nth-child(4) {
            left: 90px;
            z-index: 7;
        }

        .icon:nth-child(5) {
            left: 120px;
            z-index: 6;
        }

        .icon:nth-child(6) {
            left: 150px;
            z-index: 5;
        }

        .icon:nth-child(7) {
            left: 180px;
            z-index: 4;
        }

        .icon:nth-child(8) {
            left: 210px;
            z-index: 3;
        }

        .icon:nth-child(9) {
            left: 240px;
            z-index: 2;
        }
    </style>
    <title>Example 2</title>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Approach 2: Using Positioning</h3>

    <div class="icons">
        <div class="icon">A</div>
        <div class="icon">B</div>
        <div class="icon">C</div>
        <div class="icon">D</div>
        <div class="icon">E</div>
        <div class="icon">F</div>
        <div class="icon">G</div>
        <div class="icon">H</div>
        <div class="icon">I</div>
    </div>

</body>

</html>

Output:


Next Article
How To Make a Website Responsive With Flexbox?

G
gauravggeeksforgeeks
Improve
Article Tags :

Similar Reads