flex父元素下position:absolute子元素锚点偏移，如何实现覆盖效果？

问题核心 #

你遇到的问题根源是：绝对定位元素的参考容器默认是最近的非static定位祖先，原代码中.wrapper的position为默认的static，导致.b相对于<body>定位，而非你期望的.a所在区域。

解决步骤（无需修改父容器display:flex，也不用调整DOM结构） #

1. 给父容器.wrapper添加position: relative，让.b的定位锚点切换到.wrapper
2. 调整.b的定位属性，使其精准覆盖在.a的区域上

修改后的完整代码 #

body{
  color: white;
}
.wrapper{
  display: flex;
  position: relative; /* 关键：设置定位参考容器 */
  min-height: 100px; /* 添加强制高度方便预览效果 */
}
.wrapper .a{
  background-color: blue;
  flex-grow: 1;
}
.wrapper .b{
  position: absolute;
  background-color: rgba(255, 0, 0, 0.5);
  left: 0; /* 对齐.a的左边缘 */
  right: 40px; /* 对齐.c的左边缘（对应.c的min-width） */
  top: 0;
  bottom: 0; /* 让高度铺满容器 */
}
.wrapper .c{
  background-color: green;
  min-width: 40px;
}

<div class="wrapper">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

原理说明 #

• .wrapper设为relative后，.b的绝对定位将以这个flex容器为基准，解决了锚点偏移问题
• left:0 + right:40px确保.b的宽度完全匹配.a的宽度（因为.a是flex-grow:1，占满.wrapper减去.c的40px剩余空间）
• top:0 + bottom:0让.b的高度和容器一致，完全覆盖.a
• 由于.b是绝对定位，会脱离文档流，所以.a和.c的flex布局完全不受影响，.c依然固定在右侧，.a正常占满剩余空间
• .b不在.a或.c内部，因此不会被它们的overflow:scroll属性裁剪

适配动态宽度的扩展方案 #

如果.c的宽度不是固定值，可以用CSS变量结合calc()实现动态适配：

.wrapper{
  --c-width: 40px; /* 可通过JS动态修改此变量 */
  display: flex;
  position: relative;
  min-height: 100px;
}
.wrapper .c{
  min-width: var(--c-width);
}
.wrapper .b{
  position: absolute;
  left: 0;
  right: var(--c-width);
  top: 0;
  bottom: 0;
  background-color: rgba(255, 0, 0, 0.5);
}

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