How to place div inside a div over another div?

Question

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>

Answer 1

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;
}

Answer 2

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

Answer 3

Note: I've converted a few of your classNames to use named classes as well as added some additional CSS for demonstration purposes

Perhaps try something like this:

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