позиционирование ссылки на изображение с помощью css

Question

У меня есть ссылка и изображение. Я хотел бы использовать абсолютное позиционирование css, чтобы расположить ссылку на изображении, но если я использую абсолютное позиционирование css, тогда ссылка не будет правильно размещена, если пользователь использует больший монитор или меньший монитор. Как я могу сделать это так, чтобы он работал на всех мониторах и правильно позиционировался.

Answer 1

Вариант один действительно глупый, но просто переместите ссылку, чтобы она обертывалась вокруг изображения?

<a href="http://www.example.com"><img src="http://placehold.it/350x150"></a> 

Другой вариант (если вы не можете сделать это), чтобы убедиться, что они находятся в том же родительский элемент, который position: relative;:

#container { 
 
    position:relative; 
 
    width:350px; 
 
    height:150px; 
 
} 
 
#container a { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div id="container"> 
 
    <img src="http://placehold.it/350x150" /> 
 
    <a href="http://www.google.co.uk"></a> 
 
</div>

Answer 2

сделать изображение фонового изображения, переформатировать, как показано ниже, если это возможно. (это лучше практика)

Есть ли причина, по которой это ДОЛЖНО быть передним изображением? Дайте мне знать, и у меня может быть какое-то предложение!

#divwithimage { 
    background: url("../images/sweet.jpg"); 
    background-repeat: no-repeat; 
    width: 500px; 
    height: 500px; 
    position: relative; // as this will act as parent 
} 

button { 
    position: absolute; // absolute to container above 
    left: 0; 
    top: 0; 
    width: 200px; 
    height: 40px; 
    background: pink; 
}