Question

我有一个链接和一个图像。我想使用css绝对定位来定位图像上的链接，但如果我使用css绝对定位，那么如果用户使用更大的显示器或更小的显示器，则链接将无法正确定位。我怎样才能使它能在所有显示器上正常工作并正确定位。

Answer 1

选项一实际上是愚蠢的，但只是移动链接以使其环绕图像？

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

另一种选择（如果你不能这样做）是确保它们在同一个父元素position: relative;中：

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用css

2 个答案: