How to Make Flex Items Overlap with CSS Flexbox?

Last Updated : 31 Jul, 2024

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
Using absolute position

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:

How to Set a Fixed Width Column with CSS Flexbox ?

gauravggeeksforgeeks

Improve

Article Tags :

How to Make Flex Items Overlap with CSS Flexbox?

Using Negative Margins

Using absolute position

Similar Reads

Thank You!

What kind of Experience do you want to share?