javascript - Two overlapping images via CSS and JS -
i trying enable user drag image (e.g. face) on image (e.g. map square). implemented drag&drop angular directive , kinda work. not working position of dropped image (the face): not overlaying, being placed below map square.
the starting html code generated via ng-repeat, resulting element this:
<span style="display: inline-block;position:relative;"> <img src="map_square.jpg" class="map-image"> </span>
when dropping, becomes:
<span style="display: inline-block"> <img src="map_square.jpg" class="map-image"> <img src="face.jpg" class="face-image-on-map"> </span>
this 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; }
as result of this, expect face image on map square, both being inside span-delimited area (42*42px). instead, face image outside span area, below map square (actually, on map square image, i.e. 1 below actual target).
changing position of face causes face image placed on right of target (far away it).
how can fix this?
i think you're missing top
, left
property in .face-image-on-map
.
so recommend this:
.face-image-on-map { position: absolute; top: 0; /* positoning: distance top border */ left: 0; /* positioning: distance left border */ width: 100%; max-width: 42px; z-index: 100; opacity: .8; }
(see w3schools page more information)
hope want wanted :)
Comments
Post a Comment