父容器无高度时absolute子元素无法撑开它，导致overflow失效；须设height或min-height才能启用滚动；relative父容器中absolute元素锚定不动，并不随滚；溢出裁剪需先建立父容器边界再加overflow:hidden。
父容器没高度，absolute子元素根本“撑不起来”
绝对定位元素脱离文档流，不会参与父容器尺寸计算。如果父容器只包含一个 position: absolute 子元素，又没设 height、min-height 或其他内容撑开它，父容器高度就是 0 —— 此时就算写了 overflow: auto，滚动条也不会出现，因为没有可滚动的内容区域。
常见错误现象：overflow-y: auto 完全没反应，滚动条消失；或者子元素直接“掉出”视口，父容器像不存在一样。
- 必须给父容器加明确的
height或min-height（比如min-height: 200px），才能让 overflow 生效 - 用
min-height比height更灵活：内容少时保持最小可视区，内容多时自动扩展 - 如果父容器高度依赖 JS 动态内容（如异步加载列表），得在数据渲染后手动触发重排或设置高度，否则滚动条仍不出现
relative 父容器 + absolute 子元素 ≠ 自动随滚
很多人以为只要父容器设了 position: relative，里面的 position: absolute 元素就会“跟着父容器一起滚动”。其实不是——absolute 只是把定位基准换成了这个父容器，但它本身仍固定在父容器坐标系里的某个点（比如 top: 10px; right: 10px），父容器一滚动，它就始终钉在那个位置，视觉上是“随滚”，但本质是锚定不动。
真正需要的是：子元素要随父容器内容滚动而移动（比如悬浮 badge 始终贴右上角），那就必须确保父容器有 overflow 且自身可滚，同时子元素的 top/left 是相对于父容器 padding box 计算的。
立即学习“前端免费学习笔记（深入）”；
- 漏写
position: relative→ 子元素锚定到，滚动时“飞走” - 父容器用了
position: sticky但没配top→ 定位上下文不稳定，absolute 行为异常 - 父容器有
transform（如scale(0.95)）→ 会创建新 containing block，可能干扰滚动表现或触发 Safari 渲染 bug
想让 absolute 元素“局部溢出但不拉滚动条”，关键在父容器边界
当 position: absolute 元素向右/下偏移太多（比如 right: -50px），浏览器会认为内容超出了视口，强制加水平滚动条。这不是 bug，是标准行为——absolute 元素仍属于页面布局空间，只是不占文档流位置。
单纯在父容器加 overflow: hidden 往往无效，因为父容器高度塌陷为 0，根本没有裁剪区域。
- 先确保父容器有
min-height或height，建立真实边界 - 再加
overflow: hidden，此时才能正确裁剪溢出部分 - 若需 tooltip 类“向外延伸”效果，别硬撑父容器，直接把元素移到
下，用 JS 动态计算位置（避开overflow: hidden干扰） - 旧版 Safari 对
transform+overflow组合有渲染异常，可临时加transform: translateZ(0)触发硬件加速缓解
JS 动态计算高度时容易忽略的边界条件
用 JS 设置父容器高度来触发滚动（比如根据子元素 getBoundingClientRect() 计算），要注意几个隐藏坑：
- 获取尺寸前，确保 DOM 已渲染完成（避免在
DOMContentLoaded前取值，尤其是 SSR 或动态插入场景） -
getBoundingClientRect()返回的是相对于视口的坐标，若父容器本身有transform或scroll，需手动减去偏移 - 频繁调用会触发重排，建议节流（如
requestAnimationFrame或 100ms 防抖） - 更稳妥的替代方案是用
IntersectionObserver监听子元素是否进入可视区，而非轮询 scrollTop
复杂点不在代码多难写，而在边界判断是否覆盖全：比如父容器有 padding、子元素有 margin、页面缩放、移动端 zoom 变化……这些都会让 JS 算出来的高度偏差几像素，导致滚动条时隐时现。
