如何实现fixed定位与absolute定位元素的水平对齐？

首先咱们得把fixed和absolute定位的核心差异理清楚，这就是线条不对齐的根源：

为什么两个线条会错位？ #

• 定位参考系完全不同：
  • position: fixed：元素始终以**浏览器视口（viewport）**为基准定位——不管页面怎么滚动，它的位置只和当前视口的边缘挂钩。
  • position: absolute：元素的定位基准是最近的非static定位祖先（比如设置了relative/absolute的父元素）；如果没有这样的祖先，它会默认以文档初始包含块（近似于根视口，但会因为滚动条、父元素边距和fixed的视口产生差异）为基准。
• 滚动条的隐形干扰：
  当页面出现垂直滚动条时，不同浏览器对vw单位的处理有差异。比如Chrome中，100vw会包含滚动条的宽度，但width:100%的body元素宽度是视口宽度减去滚动条宽度。如果你的line-two是相对于默认static定位的body，那它的right:20vw是相对于body的右侧（比视口右侧窄了滚动条宽度），自然和fixed线条错位。
• 父元素的边距/内边距：
  如果line-two的父容器有padding-right或者边框，absolute元素的right偏移是相对于父容器的内边距边缘，而fixed元素的right是相对于视口边缘，这也会导致错位。

怎么让它们精准对齐？ #

这里给你几个实用的解决思路：

1. 统一定位参考系 #

给line-two的父容器（比如body）设置定位上下文，让它的宽度和视口完全一致：

/* 先重置body默认样式，去掉默认margin干扰 */
body {
  margin: 0;
  padding: 0;
  position: relative; /* 让line-two以body为定位基准 */
  width: 100vw; /* 确保body宽度和视口完全匹配 */
}

div.line-one {
  position: fixed;
  right: 20vw;
  /* 加个样式方便可视化 */
  width: 2px;
  height: 100vh;
  background: red;
}

div.line-two {
  position: absolute;
  right: 20vw;
  top: 100vh; /* 放在下一页的断点位置 */
  /* 加个样式方便可视化 */
  width: 2px;
  height: 100vh;
  background: blue;
}

这样设置后，line-two的right:20vw是相对于和视口同宽的body，和line-one的fixed定位基准完全对齐。

2. 消除滚动条的影响 #

如果滚动条是错位的元凶，可以强制页面始终显示垂直滚动条，让视口宽度的计算基准保持一致：

html {
  overflow-y: scroll; /* 强制显示垂直滚动条，即使内容不够 */
}

这样不管页面有没有超出视口，vw的计算都会包含滚动条宽度，fixed和absolute的偏移基准就统一了。

3. 检查父容器的样式 #

如果line-two嵌套在其他容器里，一定要确保这个容器没有额外的padding/border，或者给它设置position: relative并让它的宽度和视口对齐，避免定位偏移的参考系不一致。

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