如何排列固定和绝对定位的元素

Question

我正在使用页面过渡，它涉及向下滚动的固定行并在下一个分页符上与绝对定位的行对齐。

我知道固定和绝对定位的元素不会以相同的方式呈现位置，但我对为什么会这样以及如何解决它感到困惑。

/* These elements need to line up horizontally, but do not */
div.line-one {
position: fixed;
right: 20vw;
}
div.line-two {
position: absolute;
right: 20vw;
}

任何帮助将不胜感激。

Answer 1

它们都从正常的文档流中取出，并放置在它们应该在的位置，在同一个位置。由于它们明确的位置，它们不会相互干扰。

两者之间唯一的"关系"是DOM中的堆叠顺序，因此绝对定位的div放在固定的div之上，因为它在HTML中位于它之后。

.line-one {
position: fixed;
right: 20vw;
background: red;
z-index: 1; /* just so that you can see both; remove it and you'll see it's hidden under the "absolute" */
}
.line-two {
position: absolute;
right: 20vw;
background: green;
}

<div class="line-one">fixed</div>
<div class="line-two">absolute</div>

因此，为了将它们彼此相邻放置，您需要将其中一个"推"另一个的宽度，最好使用CSScalc()函数：

.line-one {
position: fixed;
right: 20vw;
background: red;
}
.line-two {
position: absolute;
right: calc(20vw + 32px);
background: green;
}

<div class="line-one">fixed</div>
<div class="line-two">absolute</div>