sticky在通讯录列表中不吸顶首字母，最常见的原因是父容器设置了overflow:hidden/auto或display:table相关值，导致sticky退化为static；必须确保父容器无此类属性、显式设置top:0、避免table布局及干扰属性，并注意iOS渲染兼容性。
为什么 sticky 在通讯录列表里不吸顶首字母？
最常见的原因是首字母标题被包在了 overflow: hidden 或 overflow: auto 的父容器里——比如整个通讯录用了 div.list { height: 500px; overflow-y: auto; }，这时 sticky 就会直接退化为 position: static，因为浏览器判定“滚动上下文”已被该父容器接管，而它又不支持 sticky 触发机制。
另一个高频坑是：首字母标题用了 display: table-cell 或嵌套在 display: table 结构中。sticky 明确不支持 table 系列 display 值，哪怕只是视觉上模仿表格布局也不行。
- 检查所有祖先元素，特别是直接父容器，用开发者工具看是否意外带了
overflow、transform、filter或will-change - 确保首字母标题是
block、flex或grid子项，不是table-row/table-cell - 如果通讯录整体是可滚动区域（非 body 滚动），sticky 会相对于该区域顶部计算，而非视口——这反而是你想要的，但必须保证该区域本身有高度且内容溢出
首字母标题怎么写 sticky 才生效？
必须显式设置 top，且值要合理。iOS 通讯录效果通常是“贴住滚动区域顶部”，所以 top: 0 是标准写法；若顶部有导航栏或状态栏，可用 top: env(safe-area-inset-top) 兜底。
注意：不能只写 position: sticky，不设 top 就等于没写。
立即学习“前端免费学习笔记（深入）”；
.letter-header { position: -webkit-sticky; position: sticky; top: 0; background: #f5f5f5; z-index: 10; }- 加
z-index是为了防止被后续列表项遮盖，尤其当列表项有阴影或半透明背景时 - 避免给该元素设
float、clear或vertical-align，这些会让 sticky 失效 - 如果用 Flex/Grid 布局包裹首字母，需额外加
align-self: flex-start（Flex）或justify-self: start（Grid），否则对齐规则可能干扰粘性基准线
iOS Safari 下首字母闪退或卡住怎么办？
iOS Safari 在 15.4 之前版本对 sticky 的滚动帧率优化差，配合 box-shadow、backdrop-filter 或复杂背景渐变时，容易在临界点跳回原位，或吸顶后无法脱离。
这不是 bug，是渲染管线在快速滚动时临时降级导致的行为抖动。
- 优先移除
will-change: transform或transform: translateZ(0)这类强制 GPU 加速的 hack - 把
box-shadow换成单色边框（border-bottom: 1px solid #eee），或用更轻量的filter: drop-shadow() - 如仍不稳定，可在 iOS 上用 JS 监听
scroll，检测滚动位置后手动切到position: fixed，滚动停止后再切回sticky（注意处理resize和方向变更） - 不要依赖
-webkit-backface-visibility: hidden这类旧版 workaround，它在新系统中可能引发其他层叠问题
为什么两个相邻首字母会“叠在一起”？
sticky 元素在粘住时仍保留在文档流中，占据原始空间——这是优势，但也是陷阱。当 A 字母吸顶后，B 字母滚动上来，它的 top: 0 会和 A 的底部重叠，尤其在列表项高度不一致时。
这不是 sticky 本身的问题，而是布局逻辑没对齐。
- 确保每个首字母标题后面紧接对应字母的全部联系人，且中间无空 div 或 margin 折叠
- 给首字母标题设
margin-bottom: 0，并用padding-bottom控制与下个区块的距离 - 若使用
display: grid，避免用grid-auto-rows: minmax()导致行高动态变化；改用固定行高或grid-template-rows显式声明 - 最稳妥方式：让首字母标题的
height与后续联系人列表的min-height对齐，避免因内容高度突变导致粘性锚点偏移
真正难搞的从来不是写对那行 position: sticky，而是判断它到底该相对于谁滚动、谁在截断滚动上下文、以及 iOS 那些藏在渲染管线深处的妥协逻辑。
