使用position:relative定位图片锚标签时出现隐形链接问题求助

问题原因 #

position:relative的特性是元素相对自身原位置偏移，但原位置的空间会被保留。你的<a>标签作为图片的容器，会维持图片未偏移前的尺寸和位置，这就是你看到的隐形链接区域——它其实是<a>标签原本占据的空间。而position:absolute是脱离文档流的，不会保留原空间，所以不会有这个问题。

几种解决方法 #

• 用transform替代position:relative做偏移
  transform的translate偏移不会让元素保留原占位空间，<a>标签的范围会跟着图片实际显示的位置走，不会出现多余的链接区域。示例代码：

  <a href="你的跳转地址">
    <img src="你的图片地址" style="transform: translate(50px, 50px);">
  </a>
  

• 给标签设置固定尺寸并隐藏溢出
  给<a>设置和图片一致的宽高，再加上overflow:hidden，这样即使图片偏移，<a>的可点击范围只会是你设定的区域，原占位空间会被裁剪掉。注意要把<a>设为块级或行内块元素：

  <a href="你的跳转地址" style="display: inline-block; width: 200px; height: 200px; overflow: hidden;">
    <img src="你的图片地址" style="position: relative; left: 50px; top: 50px;">
  </a>
  

• 将图片设为块级元素（辅助优化）
  有时候图片作为行内元素会自带默认的空白间距，给图片加display: block;可以避免容器尺寸被额外间距撑开，配合上面的方法使用效果更好：

  img {
    display: block;
  }