Css élément positionné en absolu sur l'image d'arrière-plan (responsive)

Question

J'ai une image d'arrière-plan réactive, donc sa largeur et sa hauteur changent lors du redimensionnement de l'écran. Sur ce fond, il y a un élément avec une position absolue. Maintenant, mon problème est que lors du redimensionnement de l'écran, l'élément positionné absolu ne suit pas sa place sur l'image d'arrière-plan ...

Ceci est mon code HTML:

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; 
} 

plein écran est quelque chose comme ceci: enter image description here Mais lorsque l'écran est plus petit, les mouvements des éléments positionnés absolus, comme ceci: enter image description here entrer le code ici

Answer 1

Eh bien, si vous voulez qu'une image apparaisse au-dessus d'une autre à un endroit précis, vous devriez essayer vw et vh (largeur verticale, hauteur verticale), je me souviens de faire quelque chose comme ça. Si cela ne résout pas votre problème, vous devez utiliser px, et de détecter la taille de l'écran avec javascript afin que vous sachiez où placer les éléments.

Answer 2

Je pense que CSS Transform-translate est plutôt utile dans l'alignement des éléments? Peut-être que vous essayez? Vous pouvez définir que la petite image toujours rester environ 25% de la hauteur de la grande image:

#clicked1 .box { 
    transform:translateY(25%); 
    transform:translateX(25%); 
} 

Plus d'info: https://www.w3schools.com/cssref/css3_pr_transform.asp. Je n'ai pas votre source d'image donc je n'ai pas pu essayer. Mais espérons que cela aide.