优先用 position: sticky 替代 absolute，如设 bottom: 0 并确保父容器有滚动上下文；必须用 absolute 时用 ResizeObserver 监听高度变化并防抖更新位置；更推荐用 flex/grid 布局或 relative 包裹实现底部吸附。
当按钮使用 position: absolute 定位在动态内容（比如折叠面板、异步加载区块、图片懒加载）下方时，父容器高度变化会导致按钮“漂移”或遮挡——根本原因是 absolute 脱离文档流，不响应后续内容高度变化。
优先用 position: sticky 替代 absolute
如果按钮只需“贴着某区域底部/顶部跟随滚动”，sticky 更自然、无需监听、无重排开销：
- 给按钮设
position: sticky; bottom: 0;，并确保其父容器有明确高度或有滚动上下文（如overflow-y: auto） - 父容器不能是
display: contents或无边界（如未设max-height的 flex 容器），否则 sticky 失效 - 示例：按钮放在一个带
max-height: 400px; overflow-y: auto;的卡片内，设置sticky后会始终停在卡片可视区底部
必须用 absolute？那就监听高度变化
仅当按钮需精确定位（如右下角悬浮、锚定到某个 DOM 节点旁）且无法改布局时，才用脚本补位：
- 用
ResizeObserver监听父容器或关键兄弟元素的高度变化（比scroll或DOMSubtreeModified更精准高效） - 变化后重新计算按钮的
top或bottom值，例如：btn.style.bottom = (parent.scrollHeight - btn.offsetHeight) + 'px'; - 避免高频重复计算：加防抖（
setTimeout延迟 50ms）、或只在 resize 后且尺寸确实变了再更新
更简单的布局替代方案
多数错位问题其实源于布局设计不合理，可考虑：
立即学习“前端免费学习笔记（深入）”；
- 把按钮提升到和动态内容同级，用
flex或grid控制整体结构（如display: flex; flex-direction: column;，按钮设margin-top: auto;） - 用
position: relative包裹动态内容，按钮用absolute定位在其内部，但通过bottom: 0+width: 100%实现“底部吸附”，父容器高度变化时自动对齐 - 若内容由 Vue/React 管理，直接在组件 state 更新后同步调整按钮位置（比全局监听更可控）
基本上就这些。sticky 能解决八成场景，脚本监听是兜底，而重构布局往往是最省心的解法。
