图片按钮错位求助：按钮未与图片正确对齐

• 问题根源：图片默认是inline/inline-block元素，浏览器会为这类元素预留基线对齐的间隙，导致图片所在容器的高度略大于图片本身，按钮定位时就会跟着容器高度偏移，出现低于图片的情况。

• 具体修复步骤：

  1. 给图片设置display: block，消除inline元素自带的基线间隙，让容器高度完全匹配图片高度：

     .image-container img {
       display: block;
       width: 100%;
     }
     

  2. 确保按钮的父容器（包裹图片和按钮的容器）设置position: relative，让按钮的绝对定位基于这个容器：

     .image-container {
       position: relative;
       /* 移除可能存在的多余padding/margin，避免额外偏移 */
     }
     

  3. 确认按钮的top属性设置为0，保证它紧贴容器顶部（也就是图片顶部）：

     .overlay-btn {
       position: absolute;
       top: 0;
       left: 0;
       /* 其他样式按需保留 */
     }
     

这样调整后，按钮就能完美贴合图片顶部，不会出现偏移的情况。

内容的提问来源于stack exchange，提问作者ohmygodimpregnant