当父容器设置了 overflow-y: auto 且子元素使用 position: absolute 时，该绝对定位元素会相对于最近的「定位上下文」（即 position: relative/absolute/fixed/sticky 的祖先）进行定位；一旦父容器滚动，它仍属于该容器的文档流内，因此会随滚动而移出视口。解决方法是改用 position: sticky 并设置 bottom: 0。
当父容器设置了 `overflow-y: auto` 且子元素使用 `position: absolute` 时，该绝对定位元素会相对于最近的「定位上下文」（即 `position: relative/absolute/fixed/sticky` 的祖先）进行定位；一旦父容器滚动，它仍属于该容器的文档流内，因此会随滚动而移出视口。解决方法是改用 `position: sticky` 并设置 `bottom: 0`。
在 CSS 布局中，一个常见误区是认为 position: absolute 能实现“滚动时始终可见”的效果——但实际上，absolute 定位仅脱离普通文档流，但并未脱离其包含块的滚动影响。只要它的包含块（这里是 .wrap，因设置了 position: relative）发生滚动，.absolute 元素就会随其内容一同被卷走。
真正适用于“容器内粘性定位”的方案是 position: sticky。它是一种混合定位：在未到达指定阈值前表现为 relative，一旦滚动到临界点（如 bottom: 0），便“粘住”在容器边界，直到离开该容器范围。
✅ 正确做法如下：
.wrap {
max-height: 200px;
overflow-y: auto;
position: relative; /* 保持为 sticky 的包含块（非必需，但建议保留） */
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 值才生效；
- 它的包含块必须具有滚动机制（即 overflow 非 visible），否则无粘性行为；
- 不支持 sticky 的旧版浏览器（如 IE 全系列、早期 Safari）需考虑降级方案（例如 JS 监听 scroll + 动态切换 fixed 类）；
- 若 .absolute 在 DOM 中位于 .content 之后，它将自然出现在内容下方并粘底；若需覆盖在内容之上，请添加 z-index 并确保父容器 position 不为 static（当前已满足）。
总结：position: absolute 解决的是“脱离文档流的精确定位”，而 position: sticky 才是专为“滚动上下文中的条件性固定”设计的现代方案。合理选择定位方式，是构建健壮、可维护 UI 的关键基础。
