position: sticky 无法自适应高度，其粘性生效依赖父容器形成明确滚动上下文；需避免 transform 等禁用属性，iOS Safari 中 body 不可作为滚动祖先，须用带 height 和 overflow-y: auto 的包裹层。
position: sticky 无法直接实现“自适应高度”的粘性效果——它本身不控制自身高度，只控制粘住时的偏移位置；所谓“自适应高度”，其实是靠父容器撑开、内容自然伸缩，再配合 sticky 的触发逻辑来间接达成。
sticky 元素自身不能设 height: auto 来“随内容变高”还保持粘性
很多人想让导航栏根据内部文字行数自动增高，并始终吸顶，于是写 height: auto + position: sticky。但问题不在 sticky，而在：sticky 只响应滚动位置，不参与高度计算。只要父容器没显式高度或未撑开，浏览器就无法确定“滚动到哪儿该触发粘住”。
- sticky 元素的高度由其内容决定，但它的“粘性区域”是否生效，取决于**父容器是否形成可滚动上下文**
- 如果父容器是
display: flex或display: grid，且没设height和overflow-y: auto，sticky 会退化为position: static（尤其在 Safari/iOS） - 不要给 sticky 元素加
min-height或height去“撑高”，这反而可能破坏内容流；应让内容自然撑开，再确保父容器有明确滚动边界
移动端必须用独立滚动容器，不能依赖 body 滚动
iOS Safari（包括 16.x）至今不认 body 作为 sticky 的滚动祖先。你把 .header 直接放 <body> 下，哪怕写了 top: 0，computed 样式里也显示 position: static。
- 正确结构：用一个包裹层（如
.app）代替body承担滚动职责 - 该包裹层必须同时满足：
height: 100vh（或max-height: calc(100vh - 60px)），overflow-y: auto，且overflow: hidden在body上防双滚动条 - sticky 元素的
top值必须是像素或calc()，比如top: 16px，不能是top: 10%或top: 0在某些旧 iOS 版本中也不稳
flex/grid 容器内 sticky 生效的前提是显式滚动上下文
把 position: sticky 放进 display: flex 或 display: grid 的子项里，90% 失效是因为父容器没“声明自己可滚动”。flex/grid 本身不是滚动容器，除非你主动加约束。
立即学习“前端免费学习笔记（深入）”；
- 对 flex 容器：加
height: 600px（或max-height）+overflow-y: auto，否则子项的 sticky 会按 viewport 计算，而非 flex 区域内 - 对 grid 容器：同理，不能只靠
grid-template-rows: 1fr，必须让容器本身可滚动；若用grid-area划分区域，确保该区域的 wrapper 有overflow-y: auto且无overflow: hidden - 避免在任何祖先上用
transform、filter、will-change——它们会创建新层叠上下文，直接禁用 sticky
表格表头冻结时，thead 不是天然 sticky 容器
直接给 <thead> 设 position: sticky; top: 0 在 Chrome 新版能工作，但在 Safari 和旧版 Edge 中大概率失效，因为 <thead> 的 display 是 table-header-group，不属于 sticky 支持的 display 类型列表。
- 可靠解法：把表头抽成
<div class="table-head">，设display: grid或display: flex模拟列宽，再加position: sticky; top: 0 - 若坚持用原生
<table>，需强制改<thead>的 display：display: block，同时<tbody>也要设display: block+max-height: 300px+overflow-y: auto - 注意：改
display后列宽会丢失，得用table-layout: fixed+ 显式width控制每列
真正难的不是写 position: sticky，而是判断“谁在滚动”——浏览器只认**最近的、有明确尺寸和 overflow:auto 的块级祖先**为滚动上下文。漏掉这一层，再标准的 CSS 也会静默失效。
