Quiero crear un mapa con botones en los que se pueda hacer clic sobre los diferentes países. Configuré una prueba en https://codepen.io/DigitalDesigner/pen/vYpXvZb . Probé el posicionamiento absoluto, pero eso hace que el enlace se mueva del lugar deseado.
¿Cómo puedo hacer que el enlace permanezca en su lugar cuando la ventana se expande y se contrae?
.europe-map { } .map-container { width:100%; height:604px; } @media screen and (min-width:768px) { .map-container { height:727px; } } .map { background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/66/Blank_map_of_Europe_cropped.svg); background-size: 100%; background-repeat: no-repeat; background-position: left top; height:100%; } .links { } .link { } <section class="europe-map"> <div class="map-container"> <div class="map"> <div class="links"> <a class="link" href="#" style="position:absolute;left:10%;top:20%;">Test</a> </div> </div> </div> </section>Una solución, quizás la más confiable, es fusionar el mapa y los enlaces en su propio SVG.
.map-container { width: 100%; height: 604px; } @media screen and (min-width:768px) { .map-container { height: 727px; } } .link { font-size: 10px; text-decoration: underline; fill: blue; } <section class="europe-map"> <div class="map-container"> <svg viewBox="0 0 593 606" class="map"> <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/6/66/Blank_map_of_Europe_cropped.svg"/> <a class="link" xlink:href="#"> <text x="10%" y="14%">Test</text> </a> </svg> </div> </section>La posición absoluta es con respecto al elemento posicionado más cercano. En este caso, puede eliminar el elemento de links o ajustar su tamaño para que coincida con el mapa y luego establecer el posicionamiento relativo en el elemento principal de los elementos de enlace.
Tenga en cuenta que configuré la altura del elemento del mapa en la relación de aspecto de la imagen (593/606) usando relleno, y que estoy desplazando los enlaces hacia arriba y dejé el 50 % de su tamaño para centrarlos en la posición. Este último resuelve el movimiento aparente debido al tamaño del enlace en relación con el tamaño de la imagen.
.map { position: relative; background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/66/Blank_map_of_Europe_cropped.svg); background-size: 100%; background-repeat: no-repeat; background-position: left top; padding-bottom: 97.85%; /* image width / height */ } .link { position: absolute; transform: translate(-50%, -50%); /* center the element on the position */ text-decoration: none; font-family: Arial, sans-serif; color: maroon; } <section class="europe-map"> <div class="map-container"> <div class="map"> <a class="link" href="#" style="left:11.4%; top:13.5%;">Iceland</a> </div> </div> </section>