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

Question

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?

Answer 1

.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;
}
.center_ball {
z-index: 99999;
}
.left_ball2 {
z-index: 9999;
}
.right_ball2 {
z-index: 99;
}
<div class="balls">
<div class="left"></div>
<div class="left left_ball2"></div>
<div class="left center_ball"></div>
<div class="left right_ball2"></div>
<div class="left"></div>
</div>

Answer 2

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>

Answer 3

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>