'Without using absolute div, can we create different layered overlapping divs

I need help to create the following view. I can definitely use position absolute but is there a way to do it without using the absolute value?

enter image description here

htmlcss


Solution 1:[1]

I think something like this? Adding a display: flex to make them stay on the same row, and a negative margin to make them override each other.

.balls {
  display: flex;
  }

.balls > .left {
  height: 2.3rem;
  width: 2.4rem;
  border-radius: 50%;
  margin-right: -0.9rem;
  border: 4px solid white;
  background-color: red;
}
<div class="balls">
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
      </div>

Solution 2:[2]

Here you have a snippet with live example

.first {
    z-index: 1;
    border: 2px solid blue;
    position: relative;
}

.second {
    z-index: 2;
    left: -60px;
    position: relative;
    top: 10px;
    border: 2px solid red;
}

.third {
    z-index: 1;
    left: -100px;
    position: relative;
    border: 2px solid green;
}
<div>
   <img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-fr.svg" class="first">
   
   <img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-fr.svg" class="second">
   
   <img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-fr.svg" class="third">
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 manjiro sano
Solution 2 Camille

Related Questions