如何在图片特定区域上方放置div且窗口缩放时不偏移？

核心思路是用相对定位的父容器作为定位基准，让目标div的位置/尺寸基于容器的百分比定义，这样窗口缩放时，容器自适应，div的相对位置会保持和图片区域的比例一致。

解决代码示例 #

HTML结构 #

<div class="image-wrapper">
  <img src="your-image-url.jpg" alt="目标图片" class="base-image">
  <!-- 要固定位置的div -->
  <div class="fixed-div">PLACE IMAGE HERE</div>
</div>

CSS样式 #

.image-wrapper {
  /* 相对定位，作为子元素的定位基准 */
  position: relative;
  /* 让容器自适应窗口宽度，可按需调整最大宽度 */
  width: 100%;
  max-width: 900px;
  margin: 0 auto; /* 可选：让容器居中 */
}

.base-image {
  /* 图片占满容器，保持原始比例缩放 */
  width: 100%;
  height: auto;
  display: block;
}

.fixed-div {
  /* 绝对定位，基于父容器定位 */
  position: absolute;
  /* 用百分比设置位置，示例：距离顶部25%、左侧35% */
  top: 25%;
  left: 35%;
  /* 用百分比设置尺寸，保持和图片区域的比例 */
  width: 30%;
  height: 20%;
  /* 可选：添加样式方便查看效果 */
  border: 2px solid #ff4444;
  background-color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

为什么单独用position: absolute无效？ #

单独使用绝对定位时，元素会以**最近的已定位祖先（无则为文档根节点）**为基准，窗口缩放时文档尺寸变化会导致元素偏移。而嵌套在相对定位容器内后，div的定位基准变成了自适应的容器，百分比单位会随容器缩放自动调整，位置自然保持稳定。

可选方案：CSS Grid布局 #

如果需要更精细化的区域划分，可使用Grid让div和图片重叠在同一网格区域，通过margin或对齐属性固定位置：

.image-wrapper {
  display: grid;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.base-image {
  grid-area: 1 / 1; /* 图片占满整个网格 */
  width: 100%;
  height: auto;
}

.fixed-div {
  grid-area: 1 / 1; /* 和图片重叠 */
  align-self: start;
  justify-self: start;
  margin-top: 25%;
  margin-left: 35%;
  width: 30%;
  height: 20%;
  border: 2px solid #ff4444;
  background-color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

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