[FIXED] How to place div inside a div over another div?

Issue

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 class="first">
  <div style="display: flex; justify-content: center;">
    <img src="https://via.placeholder.com/100" class="puscicaAnimacija" />
  </div>
</div>

<div class="second">

</div>

Solution

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 class="first">
  <div class="ontop">
    <img src="https://cdn-icons-png.flaticon.com/512/159/159119.png" class="puscicaAnimacija" />
  </div>
</div>

<div class="second">
</div>

Answered By - mitch15
Answer Checked By - - Senaida (ReactFix Volunteer)