Question

I have a small problem which i can’t seem to figure out.
I tried searching this problem but i can’t seem to find a solid answer.

Look at this example:
Fiddler

It’s pretty straightforward. I have a div which is centered on the screen.
This div contains an image and i want to put another image on top based on XY positions.
(Normally i get these XY positions from a database but just for the clarity of this example i hardcoded them).

When i run the code my image stands next to my first image. I added the z-index but that doesn’t seem to work. I read on some posts about relative z-indexing not working but can someone help me out on how to do this?

Thank you all in advance.
Kind Regards,
Luuk86

Answer 1

To position an element using X Y positions you should use position: absolute;

If you want to position it inside another element, add position: relative; to the container.