html - 当页面上的所有元素都具有绝对位置时滚动？

Question

在我的页面上，所有元素都有绝对位置。其中一些在页面顶部，一些在页面底部。但是，当我添加一个附加元素以在页面中央显示新闻文本时，它隐藏在底部对齐的元素下方。在滚动时，底部对齐的元素保持在同一个位置，中位数继续下降。但我需要，当页面可滚动时，底部元素始终固定在底部。

.top-element {
  position: absolute;
  top: 0;
  left: 0;
}
.middle-element {
  position: absolute;
  top: 300px;
  left: 0;
}
.bottom-element {
  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="top-element">MUCH TEXT IS HERE</div>
<div class="middle-element">MUCH TEXT IS HERE</div>
<div class="bottom-element">MUCH TEXT IS HERE</div>

如果中间元素的内容高度大于窗口大小，则底部元素保持在同一位置。

Answer 1

您应该将底部元素的 position: absolute 更改为 fixed