Two overlapping images via CSS and JS

Question

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?

That's not an option: changing the position of the map square causes changes globally (i.e. all map squares become overlapped in a single position) — Manu
– Manu, Commented May 28, 2016 at 13:14
A question to the class names: Both img tags have the same class, so .face-image-on-map is unused in your example. Is this right? — TuringTux
– TuringTux, Commented May 28, 2016 at 13:17

TuringTux · Accepted Answer · 2017-06-17 08:36:27Z

2

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 :)

edited Jun 17, 2017 at 8:36

answered May 28, 2016 at 13:25

TuringTux

4932 gold badges13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manu Over a year ago

Correct! I was playing around and just couldn't figure that out. Actually, I also need position:relative on the containing span element. I added it to the OP.

TuringTux Over a year ago

No problem :) I'm glad I could help you. I'll add a link to the W3Schools page, just in case someone needs that later.

Collectives™ on Stack Overflow

Two overlapping images via CSS and JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related