I have a responsive background image, so its width and height changes when resizing the screen. Over that background, there's an element with position absolute. Now, my problem is that when resizing the screen, the absolute positioned element doesn't follow its place over the background image...
This is my HTML code:
<section id="all">
<div id="clicked1">
<img class="box" src="factory.svg" width="100%" height="auto">
</div>
</section>
CSS:
#all {
width: 100%;
height: 600px;
position: relative;
max-width: 1240px;
background: url('beach_to_meter.svg') no-repeat;
}
#clicked1 {
position: absolute;
left: 27%;
top: 28%;
z-index: 100;
width: 200px;
}
#clicked1 .box {
width:14vw;
max-width: 180px;
}
The full screen is something like this: enter image description here But when the screen is smaller, the absolute positioned element moves, like this: enter image description here
Well if you want an image to appear on top of another in an exact spot you should try vw and vh(vertical width, vertical heigh), i remember making something work like that. If that doesn't solve your problem you should use px, and detect the size of the screen with javascript so you know where to place the elements.
