CODEWITHSUNDEEP
javascripthtmlcss
Manu
Manu

Reputation: 4137

Two overlapping images via CSS and JS

I am trying to enable a user to drag an image (e.g. a face) on another image (e.g. a map square). I implemented the drag&drop with an Angular directive and it kinda work. What is not working is the position of the dropped image (the face): it is not overlaying, but it is being placed below the map square.

The starting HTML code is generated via ng-repeat, but the resulting element is this:

<span style="display: inline-block;position:relative;">
      <img src="map_square.jpg" class="map-image">
</span>

When dropping, it 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 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;
}

As a result of this, I would expect the face image to be over the map square, both being inside the span-delimited area (42*42px). Instead, the face image is outside the span area, below the map square (actually, it is over another map square image, i.e. the one below the actual target).

Changing position of the face causes the face image to be placed on the right of the target (far away from it).

How can I fix this?

Upvotes: 1

Views: 504

Answers (1)

TuringTux
TuringTux

Reputation: 579

I think you're missing the top and the left property in .face-image-on-map.

So I would recommend this:

.face-image-on-map {
  position: absolute;
  top: 0; /* Positoning: distance from top border */
  left: 0; /* Positioning: distance from left border */
  width: 100%;
  max-width: 42px;
  z-index: 100;
  opacity: .8;
}

(See the W3Schools page for more information)

Hope this is want you wanted :)

Upvotes: 2

Related Questions