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 位于固定的之上，因为它来了在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>

因此，为了将它们放在彼此旁边，您需要通过另一个的 width “推”其中一个，最好使用 CSS {{1 } 功能：

calc()

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

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

1 个答案: