HTML悬停异常：img3.jpg的可点击区域超出图片范围

这种情况大概率是自定义overlay的定位逻辑错误，和Bulma的columns is-multiline布局本身没冲突，核心原因是：你给overlay设置了position: absolute，但没有给图片的直接父容器加上position: relative，导致overlay的定位基准往上溯源到了columns区块，最终覆盖了整个columns的范围。

具体修复步骤 #

1. 给包含img3.jpg的直接父容器添加相对定位
   给图片所在的容器加上position: relative;，让overlay的绝对定位以这个容器为基准，而不是外层的columns。

   示例结构：

   <div class="columns is-multiline">
     <div class="column is-4">
       <!-- 给这个容器加relative -->
       <div class="image-wrap" style="position: relative;">
         <img src="img3.jpg" alt="图片描述">
         <div class="overlay">你的点击层内容</div>
       </div>
     </div>
     <!-- 其他列内容 -->
   </div>
   

2. 修正overlay的CSS定位范围
   确保overlay完全贴合父容器的边界，不会溢出：

   .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     /* 其他样式：背景色、hover效果等 */
     background-color: rgba(0,0,0,0.3);
     cursor: pointer;
   }
   

3. 排查是否有其他CSS干扰
   检查有没有其他全局样式或Bulma自定义类修改了columns或column的定位属性，如果有，调整优先级或移除冲突样式。

为什么会出现这个问题 #

CSS的绝对定位元素，会找最近的设置了非static定位（relative/absolute/fixed/sticky）的父元素作为定位基准。如果你的图片父容器没有设置position: relative，overlay就会一直往上找，直到找到columns（如果columns没有定位，就会到body），最终导致可点击区域覆盖了整个columns区块。

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