<p>局部滚动容器内容被顶部固定元素遮挡，需用calc(100vh - env(safe-area-inset-top) - 50px)设高度并确保父级无overflow:hidden；绝对定位子元素错位须给容器加position:relative；高度塌陷需明确height/max-height；横向固定列应抽离滚动容器并用sticky实现。</p>
局部滚动容器内容被顶部固定元素遮挡
这是最常见也最容易误判的情况：你给某个 .scroll-container 设置了 height 和 overflow-y: auto，但里面的内容一滚动，顶部几行就被父级或祖先里的 position: fixed 或 position: sticky 元素（比如导航栏、筛选栏）盖住了。
根本原因不是滚动条“重叠”，而是该容器的 top 起始位置没避开固定元素——它从 0px 开始算高度，而固定元素已占据视口顶部空间，导致内容视觉上被裁切。
- 别靠 JS 动态计算窗口高度再减去导航栏高度，太脆弱（缩放、横屏、字体加载都会影响）
- 用 CSS 的
calc()直接声明安全区域：height: calc(100vh - 50px);（假设导航栏高 50px） - 更健壮的做法是用
env(safe-area-inset-top)兼容刘海屏：height: calc(100vh - env(safe-area-inset-top) - 50px); - 确保该容器的父级没有
overflow: hidden，否则滚动条会被直接截断
绝对定位子元素在滚动容器里错位或消失
你给滚动容器内的某个卡片加了 position: absolute，结果一滚动，它就偏移、错位，甚至完全看不见。这不是 bug，是 position: absolute 的定位锚点变了。
当父容器设了 overflow-y: auto，它就自动成为「包含块（containing block）」，absolute 子元素的 top/left 就相对于这个容器起始边缘计算——但如果你没给容器设 position: relative，浏览器会继续往上找，最终可能锚定到 body，造成滚动时定位失准。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须给滚动容器显式加上
position: relative，哪怕它只是个空声明 - 避免对
absolute元素同时设transform和z-index，某些旧版 Safari 会触发新的 stacking context，导致层级异常 - 如果需要让某个绝对定位元素「穿透」滚动限制（比如悬浮操作按钮），把它移出滚动容器 DOM 结构，用
portal或手动挂载到body下，再用 JS 同步位置
滚动容器高度塌陷导致滚动条不出现
你写了 overflow-y: auto，但滚动条死活不出来，检查发现容器高度是 0。这是因为里面全是 position: absolute 或 float 元素，它们脱离文档流，父容器无法感知内容高度。
- 滚动容器必须有明确的
height或max-height，不能依赖内容撑开 - 不要用
min-height代替height或max-height，它不触发滚动机制 - 如果内容高度动态变化，用 JS 监听并更新容器
style.height比用resizeObserver更直接（尤其在 iOS Safari 上） - 慎用
display: contents包裹滚动容器，它会让容器失去盒模型，overflow失效
横向滚动条和右侧固定操作栏打架
表格或长列表启用了 overflow-x: auto，但右侧固定操作列（如编辑/删除按钮）在滚动时被横向滚动条盖住，或者操作列本身随内容一起滚动，失去固定效果。
横向滚动 + 固定列是经典布局冲突，纯 CSS 很难兼顾「列固定」和「整体可滚」。关键在于分层：滚动容器只管数据列，操作列必须脱离该容器流式布局。
- 把操作列抽出来，用
position: sticky; right: 0; z-index: 10;，并确保其父容器有overflow-x: clip（而非auto）防止它被裁掉 - 数据列容器设
overflow-x: auto，但宽度要预留操作列空间（例如width: calc(100% - 80px)） - 避免在同一个滚动容器里混用
sticky和absolute，iOS Safari 对两者的堆叠顺序处理不一致 - 测试时重点看 Chrome for Android 和 Safari on iOS，它们对
sticky的兼容边界最苛刻
滚动区域的定位、高度、溢出行为三者必须同步约束，少一个就会表现为“重叠”——实际是视觉错位或渲染裁切。最易忽略的是：父容器没设 position: relative 却指望 absolute 子元素乖乖待在滚动范围内。
