I want to implement a functionality where a user can drag an image (like a face) onto another image (such as a map square). I have used an Angular directive for drag&drop and it seems to be partially working. However, the issue is that the dropped image (the face) is not appearing on top of the map square; instead, it is being positioned below it.
The initial HTML code is generated using ng-repeat, resulting in the following element:
<span style="display: inline-block;position:relative;">
<img src="map_square.jpg" class="map-image">
</span>
After dropping, it changes to:
<span style="display: inline-block">
<img src="map_square.jpg" class="map-image">
<img src="face.jpg" class="face-image-on-map">
</span>
Here is my CSS code:
.map-image {
position: relative;
max-width: 42px;
z-index: 0;
}
.face-image-on-map {
position: absolute;
width: 100%;
max-width: 42px;
z-index: 100;
opacity: .8;
}
According to this setup, the face image should overlay the map square within the span area of 42*42px. However, in reality, the face image ends up outside the span area, below the map square (it actually overlaps with another map square image, below the intended target).
Any adjustments made to the position of the face image only result in it being placed far away from the target square.
How can I resolve this positioning issue?