How to place div inside a div over another div?-CodePudding

I have a div, which has an image inside another div. I would like to place the inner div over the second div. So the arrow in the image below should go over the red. Is this possible?

.puscicaAnimacija {
  bottom: -2%;
  height: 5%;
  margin-bottom: -10px;
  z-index: 2;
  position: absolute;
}

<div >
  <div style="display: flex; justify-content: center;">
    <img src="https://via.placeholder.com/100"  />
  </div>
</div>

<div >

</div>

CodePudding user response：

You should put position:relative on the second div that refers to the .puscicaAnimacija class, then using the property z-index on the second element with an higher value than in the first.

.puscicaAnimacija{
   position: relative;
}

.second{
   position: absolute;
   z-index: 3;
}

CodePudding user response：

In order to use z-index the parent element must be positioned. Use position:relative on the div you want to go under.

CodePudding user response：

Without seeing all your code, you could do something like this below. I've converted a few of your classNames to named classes and added some additional CSS for example purposes, but the idea is the same.

.first {
  background: navy;
  width: 300px;
  height: 100px;
  position: relative;
}

.ontop {
  background: whitesmoke;
  width: 300px;
  height: 50px;
  position: absolute;
  bottom: 0;
}

.second {
  background: red;
  width: 300px;
  height: 50px;
}

.puscicaAnimacija {
  bottom: -40%;
  left: 10%;
  height: 48px;
  position: absolute;
}

<div >
  <div >
    <img src="https://cdn-icons-png.flaticon.com/512/159/159119.png"  />
  </div>
</div>

<div >
</div>