如何利用relative与absolute实现div在img内的响应式固定定位？

拖动屏幕（缩放窗口）时，元素无法固定在img内部，请问如何通过relative与absolute实现div在img内的固定定位？

核心解决方案 #

要让绝对定位的元素始终锚定在img内部，关键是给父容器设置相对定位，并确保图片自适应：

• 给.location添加position: relative，让内部绝对定位的子元素以该容器为定位基准，而非整个页面。
• 给img设置width: 100%; height: auto;，保证窗口缩放时图片按比例自适应，父容器尺寸也会同步变化，子元素的百分比定位就能自动适配。

修改后的完整代码 #

HTML

<div class="location">
  <img src="你的图片链接" alt="地图">
  <div class="branch-HQ d-flex">
    <span>Hàn Quốc</span>&nbsp;
    <div class="circle-ripple"></div>
  </div>
</div>

CSS

.location {
  position: relative; /* 关键：设置相对定位作为子元素的定位参考 */
  display: inline-block; /* 让容器宽度匹配图片宽度 */
  max-width: 100%; /* 防止容器超出视口宽度 */
}

.location img {
  width: 100%;
  height: auto; /* 保持图片比例，自适应窗口缩放 */
}

.location .branch-HQ {
  position: absolute;
  top: 17%;
  left: 20%; /* 百分比定位随父容器尺寸自动调整 */
}

.location .branch-HQ span {
  margin-top: -10px;
  margin-right: 10px;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  font-family: Montserrat-SB600;
  color: #000000;
}

额外说明 #

• display: inline-block可以避免父容器宽度超出图片，确保定位基准准确。
• 使用百分比而非固定像素值设置top/left，能让元素在窗口缩放时始终保持相对于图片的位置比例。

内容的提问来源于stack exchange，提问作者Minh Hải