为什么Flex项目内相对定位父元素的绝对定位子元素以body为偏移基准及修复方法

问题根因 #

你遇到的绝对定位基准偏移问题由两个常见布局错误共同导致：

• 作为定位父级的.pic容器无有效宽高：绝对定位元素脱离普通文档流，不会撑开父容器，你的.pic除了绝对定位的img之外没有其他内容，本身宽高均为0，即使设置了position: relative也没有可用的定位边界，浏览器会向上遍历查找首个有有效尺寸的定位祖先，未找到就默认以body作为偏移基准。
• 容器层级不符合需求：你需要图片覆盖在内部文本上方，而原结构中.pic和存放文本的.inner平级，即使定位正常也需要额外调整层叠关系，结构逻辑不合理。

修复方案 #

第一步：调整DOM结构 #

把图片容器.pic放到.inner内部，让它和文本内容同属一个父容器，方便基于内容区定位：

<section class="section section-about">
<a name="about"></a>
<div class="inner">
  <!-- 此处放置你原本的内部文本内容 -->
  <div class="pic">
    <img src="picture.png" alt="说明图">
  </div>
</div>
</section>

第二步：修改CSS规则 #

给内容容器.inner设置相对定位作为定位基准，同时给图片设置z-index确保层级在文本上方：

.section-about .inner {
  background-color: rgba(0,0,0,0.85);
  width: 100%;
  position: relative; /* 新增：作为img的定位父级 */
  /* 若当前.inner没有内容撑开，可临时加min-height测试，正式环境有文本后可删除 */
  min-height: 400px;
}

.section-about .pic img {
  position: absolute;
  right: 12px;
  bottom: 0px;
  z-index: 10; /* 新增：保证图片覆盖在文本上方 */
}

修改后img就会以.inner的右下角为基准偏移，符合你的需求。

内容的提问来源于stack exchange，提问作者何雲咸