如何用CSS使图片上的重叠div在响应式布局中保持位置不变

你的问题出在用margin百分比来定位绝对元素——CSS里margin的百分比值不管是上下还是左右，都是基于父元素的宽度计算的，不是高度。所以当屏幕缩放时，垂直位置会跟着父元素宽度变，而不是跟着图片的高度走，自然就错位了。

把定位方式改成用top和left（而非margin-top/margin-left），就能让百分比基于父元素的对应维度计算，完美适配图片缩放：

<div class="inContextPhoto col-lg-6" style="position:relative">
  <p class="mt-2">Preview</p>
  <!-- 替换margin为top/left，保持百分比数值不变 -->
  <div style="display: block; position: absolute; top: 22%; left: 11%; height:37%; width: 71%; background: rgba(100,0,0,.2);"></div>
  <img src="https://i.ibb.co/DkBmwZ3/ic-10-VM-Adobe-Stock-325313695.jpg" class="rounded" style="width: 100% !important; height: auto;">
</div>

关键说明： #

• top:22%：基于父容器（图片所在的.inContextPhoto）的高度计算，正好对应你想要的图片垂直位置比例
• left:11%：基于父容器的宽度计算，和图片的水平位置比例匹配
• 图片加上height:auto（虽然浏览器默认会这样，但显式声明能避免意外的高度固定），确保始终保持原始宽高比，父容器的高度会自动被图片撑开，让绝对定位的元素有正确的参考维度

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