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

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?

CodePudding user response：

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 >
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
      </div>

CodePudding user response：

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" >
   
   <img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-fr.svg" >
   
   <img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-fr.svg" >
</div>

CodePudding user response：

.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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>