绝对定位Div相对于图片不应偏移的布局问题

看起来你这个问题是典型的固定定位值在响应式场景下的适配问题，我来帮你拆解一下原因和解决办法：

问题根源 #

你现在给.white-circle用的是固定的rem值（top:12rem; right:8rem;）来定位，这个值是相对于占满父容器的.box-circle计算的。但当屏幕分辨率变化时，你的图片大概率会因为响应式规则（比如max-width:100%）缩放或调整位置，可圆形的偏移量是固定死的，自然就会和图片错开。

两种可行的解决方案 #

方案一：让圆形跟着图片走（推荐）

最稳妥的方式是把圆形的定位上下文改成图片容器，这样不管图片怎么缩放，圆形都能牢牢贴在它后面：

1. 先调整HTML结构（如果允许的话），把.box-circle挪到.home-image里面：

<div class="relative"> <!-- 原来的父容器 -->
  <div class="home-image">
    <img src="你的图片地址" alt="图片说明">
    <div class="box-circle">
      <div class="white-circle"></div>
    </div>
  </div>
</div>

2. 然后修改对应的CSS：

.home-image{
  position: relative; /* 把图片容器设为定位上下文 */
  z-index: 10;
  max-width: 100%; /* 确保图片响应式缩放 */
  height: auto;
}
.box-circle{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 把圆形容器放到图片后面 */
  overflow: hidden;
}
.white-circle{
  position: absolute;
  width: 25rem;
  height: 25rem;
  background-color: #FFFFFF;
  border-radius: 50%;
  /* 用百分比设置偏移，相对于图片容器 */
  top: 40%; /* 根据你想要的位置调整百分比 */
  right: 15%;
  /* 如果需要垂直居中，添加这句 */
  transform: translateY(-50%);
}

方案二：不改动结构，用响应式单位适配

如果不想动HTML结构，可以把固定的rem偏移改成**视窗单位（vw）**或者结合calc()，让偏移量随屏幕宽度变化：

.white-circle{
  position: absolute;
  width: 25rem;
  height: 25rem;
  background-color: #FFFFFF;
  border-radius: 50%;
  /* 用vw单位混合固定值，让偏移随屏幕缩放 */
  top: calc(8rem + 10vw);
  right: calc(4rem + 5vw);
}

另外提醒一下，记得给.home-image加上max-width:100%; height:auto;，保证图片在不同屏幕下能正确缩放，这样圆形的相对位置才不会乱。

核心思路总结 #

• 尽量避免用固定单位（rem/px）做定位偏移，优先用百分比或视窗单位
• 确保定位上下文正确：让圆形和图片共享同一个定位容器，或者直接把圆形嵌套到图片容器里
• transform: translate()是响应式定位的好帮手，能让元素基于自身中心调整位置，减少适配误差

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