I am trying to overlap one image onto another. I was able to get it into position the way I want in the LARGE view but when I scale the page size down the top image moves up. How do I get it to scale and stay in the same place as the background image?
Large view
I realize seeing other posts with these images, you’ve moved on so this is really for others for the most part.
Your main issue is that you’re using relative positioning.
Relative positioning effects the flow of elements around it
Absolute positioning does not effect the flow of elements around it
Generally it would be better to use absolute positioning and in your case top, left - positive positioning.
Z-index will primarily be based on which comes first, the first is on top of the next.
You can change that by using z-index: 0 or 1 etc…
Idealy, it’s a single image, then maybe make it a background image.
If you stick with what you are doing, you need to use Media Queries so that based on different screensizes you can change your TOP positioning value, that is ultimately the issue, your forcing negative 250 pixels.
Have both images be in 1 DIV make sure that DIV has a class of relative on it so that the Absolute positioning knows what it’s parent is.
This based on the current knowledge not anything you’ve since went with.
Saj
