为何absolute定位元素随父元素滚动偏移？如何固定在底部？

现象原因 #

当父容器.wrap同时设置position: relative和overflow-y: auto时，绝对定位的子元素.absolute是相对于.wrap的初始布局包含块定位的——这个包含块对应容器未滚动时的可视区域位置。当容器内部滚动时，absolute元素不会跟随容器的滚动视口更新位置，而是保持在相对于容器初始布局的固定坐标，因此看起来会随滚动偏移。

解决方法 #

方法1：拆分容器结构 #

将滚动区域和定位容器分离，外层容器做定位参考，内层负责内容滚动：

.wrap-outer {
  position: relative;
  max-height: 200px;
  border: 2px solid green;
}
.wrap-inner {
  max-height: 100%;
  overflow-y: auto;
}
.content {
  height: 1000px;
}
.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: red;
}

<div class="wrap-outer">
  <div class="wrap-inner">
    <div class="content"></div>
  </div>
  <div class="absolute">absolute</div>
</div>

外层容器作为absolute元素的定位参考，内层仅负责内容滚动，这样absolute元素会始终固定在外层容器的底部，不受内层滚动影响。

方法2：使用sticky定位 #

将.absolute的定位方式改为sticky，并设置bottom: 0：

.wrap {
  max-height: 200px;
  overflow-y: auto;
  border: 2px solid green;
}
.content {
  height: 1000px;
}
.absolute {
  position: sticky;
  bottom: 0;
  width: 100%;
  background-color: red;
}

sticky定位的元素会在滚动到容器指定位置时固定，这里设置bottom: 0后，元素会始终粘在.wrap容器的底部，无需调整容器结构。

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