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

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

java - Digest auth with Spring Security using javaconfig -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -