当父容器设置 overflow-y: auto 且子元素使用 position: absolute 时，该绝对定位元素会相对于最近的定位上下文（positioned ancestor） 进行定位；一旦父容器滚动，它会随文档流“视差移动”，无法真正固定。解决方案是改用 position: sticky 并配合 bottom: 0。
当父容器设置 `overflow-y: auto` 且子元素使用 `position: absolute` 时，该绝对定位元素会相对于最近的**定位上下文（positioned ancestor）** 进行定位；一旦父容器滚动，它会随文档流“视差移动”，无法真正固定。解决方案是改用 `position: sticky` 并配合 `bottom: 0`。
在 CSS 定位模型中，position: absolute 的参照系是其最近的已定位祖先元素（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）。在本例中，.wrap 设置了 position: relative，因此 .absolute 以 .wrap 的初始边界框（initial containing block of the positioned ancestor） 为基准进行定位——但关键在于：绝对定位元素仍属于普通文档流的“脱离”分支，不随父容器滚动而重定位；它固定在 .wrap 内容区的初始 bottom 位置，而 .wrap 的滚动只是内容位移，视觉上表现为 .absolute “跟着内容一起上移”，实则是它静止、内容在动，导致错觉为“消失”。
真正符合“滚动时始终吸附在父容器底部”需求的是 position: sticky：它兼具相对定位的流动性与固定定位的粘性行为。当容器滚动时，sticky 元素会在指定偏移（如 bottom: 0）处“粘住”，直到其父容器边界或自身脱离视口。
✅ 正确实现代码如下：
.wrap {
max-height: 200px;
overflow-y: auto;
position: relative; /* 保持结构定位，非必需但常见 */
border: 2px solid green;
}
.content {
height: 1000px;
}
.absolute {
position: sticky;
bottom: 0; /* 粘附于父容器底部边缘 */
left: 0;
width: 100%;
background-color: red;
/* 可选：提升层级避免被遮挡 */
z-index: 10;
}
<div class="wrap"> <div class="content"></div> <div class="absolute">absolute</div> </div>
⚠️ 注意事项：
- sticky 要求元素必须有明确的 top、bottom、left 或 right 偏移值，否则退化为 relative；
- 父容器需有可滚动的 overflow（如 auto、scroll），且高度/宽度受限（如 max-height），否则无滚动空间，sticky 不触发；
- sticky 元素不能是 float 或 clear 元素，也不适用于 table-* 显示类型（除非是 table-cell 或 table-caption）；
- 若需兼容旧版浏览器（如 IE），sticky 不被支持，此时需借助 JavaScript 监听 scroll 事件动态切换 position: fixed，但需注意 fixed 会脱离父容器布局上下文，需手动计算位置并处理父容器 transform、perspective 等影响定位上下文的属性。
总结：absolute 失效的根本原因在于其定位锚点静态、不响应滚动；而 sticky 是专为“滚动吸附”场景设计的现代定位方案，语义清晰、性能优异，应作为首选。
