如何为元素设置left和right对应不同目标的CSS绝对定位？

我尝试用CSS实现一个布局效果，希望div4的左边缘与div1的左边缘对齐，右边缘与div3的右边缘对齐，现有代码如下：

HTML代码 #

<div class="div1">
  <div class="div2">
    <div class="div3">
      <div class="div4"></div>
      Hello World
    </div>
  </div>
</div>

CSS代码 #

div {
  box-sizing: border-box;
  outline: 1px solid rgba(0, 0, 0, 0.5);
}

.div1 {
  background: rgba(255, 0, 0, 0.5);
}

.div2 {
  width: 800px;
  margin: 0 auto;
  display: flex;
  background: rgba(0, 255, 0, 0.5);
}

.div3 {
  position: relative;
  background: rgba(0, 0, 255, 0.5);
}

.div4 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 255, 0.5);
}

当前问题 #

• 默认状态：.div4的左右边缘均与.div3对齐
• 给.div1添加position: relative后：.div4的左右边缘均与.div1对齐
• 预期：.div4左边缘对齐.div1，右边缘对齐.div3

可行解决方案 #

方案一：利用calc计算负边距 #

核心是通过计算.div2两侧的空白宽度，让.div4向左延伸对应距离：
修改.div4的CSS：

.div4 {
  position: absolute;
  left: calc(-50vw + 400px); /* 400px是.div2宽度800px的一半 */
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 255, 0.5);
}

原理：.div2是居中块，两侧空白宽度为(100vw - 800px)/2 = 50vw - 400px，给.div4设置负的这个值作为left，就能让它的左边缘对齐.div1的左边缘，同时right:0保持和.div3右边缘对齐。

方案二：使用CSS变量增强灵活性 #

如果需要后续调整.div2的宽度，用变量更方便：

1. 先给.div2定义宽度变量：

.div2 {
  --div2-width: 800px;
  width: var(--div2-width);
  margin: 0 auto;
  display: flex;
  background: rgba(0, 255, 0, 0.5);
}

2. 修改.div4的left值：

.div4 {
  position: absolute;
  left: calc(-50vw + var(--div2-width)/2);
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 255, 0.5);
}

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