绝对定位容器内移除左侧div后右侧div位置偏移的修复方案咨询

嘿，这个问题我碰到过类似的，来给你捋捋～

首先你提到的给左侧div设置负margin-left等于自身尺寸的方法是完全可行的，但得注意适用场景，咱们一步步拆解：

你的思路为什么能生效？ #

当把右侧div设为position: absolute并固定它的位置（比如给它指定left值），它就脱离了正常文档流，不会受左侧div的存在/消失影响。这时候左侧div处于正常流中，给它加margin-left: -[自身宽度]，就能让它向左偏移自身宽度的距离，刚好贴在右侧div的左边，和原来的并排效果完全一致。

不过这里有个小局限：如果左侧div的宽度是动态变化的（比如内容多少会变），固定的负margin值就会失效。这种情况下你得用CSS变量或者JS来动态同步宽度，但如果是固定宽度的场景，这个方法简单直接，完全没问题。

更直观的替代方案 #

其实还有个更省心的写法，不用绕负margin的弯子：

1. 给右侧div设置position: absolute，并把它的left值设为左侧div的宽度（比如左侧宽100px，就设left: 100px）；
2. 左侧div正常放在父容器里，不用加负margin，它自然会占据父容器左侧100px的空间，和右侧div刚好并排；
3. 当移除左侧div时，右侧div的left:100px依然生效，完美留在你期望的位置。

举个代码例子：

.parent {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 400px;
  height: 50px;
  background: #eee;
}

.left-div {
  width: 100px;
  height: 100%;
  background: #aa0000;
  display: inline-block;
}

.right-div {
  position: absolute;
  left: 100px; /* 和左侧div宽度一致 */
  top: 0;
  width: 100px;
  height: 100%;
  background: #0000bb;
}

这种写法逻辑更清晰，维护起来也更方便，不用计算负margin的数值。

动态宽度场景的补充 #

如果左侧div宽度是动态的，你可以用CSS变量来同步宽度和位置：

.parent {
  position: absolute;
  /* 其他样式 */
}

.left-div {
  --left-width: 100px; /* 这里可以用JS动态赋值 */
  width: var(--left-width);
  height: 100%;
  background: #aa0000;
}

.right-div {
  position: absolute;
  left: var(--left-width);
  top: 0;
  width: 100px;
  height: 100%;
  background: #0000bb;
}

这样不管左侧宽度怎么变，右侧的位置都会自动跟着调整，移除左侧后右侧也能保持原位。

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