sticky元素与下方内容视觉重叠主因是其半透明背景未封住透出文字，需同时为sticky元素及其紧邻同级块级元素设置不透明背景色，而非仅依赖父级或继承背景。
sticky元素和下方内容重叠，是因为背景没盖住透出的文字
最常见的“重叠”其实不是定位错位，而是视觉错觉：sticky元素用了半透明背景（比如 rgba(255, 255, 255, 0.9)），它下面的内容又没设背景色，滚动时文字直接透过它显示出来，看起来像“叠在一起”。这不是z-index或top值的问题，是背景层没封住。
- 检查sticky元素的
background-color是否含alpha通道（rgba、hsla或opacity ） - 确认其直接父容器和紧邻的下一个兄弟元素（即被“盖住”的那个内容块）是否都设置了不透明背景，例如
background-color: #fff或background-color: rgba(255, 255, 255, 1) - 避免依赖父级透明背景来“透出底图”——sticky区域一旦粘住，就该独立承担视觉隔离责任
为什么只给sticky元素加背景还不够
即使#nav-bar自己写了background: white，如果它下面的#main-content没设背景，且页面body有背景图或色，滚动到临界点时，#main-content的文字仍会从sticky元素边缘“露头”，尤其在字体抗锯齿或缩放场景下更明显。
- 必须显式给sticky元素的**下一个同级块级元素**加背景，例如
#main-content { background: #fff; } - 如果用CSS自定义属性管理主题色，确保
--bg-surface这类变量在sticky和其后内容中都应用了不透明值 - 不要用
background: inherit——它会继承父级可能带透明度的背景，不可靠
移动端Safari里背景“漏光”的特殊处理
iOS Safari（尤其是15.4+）对sticky元素的合成层更激进，有时即使背景写死了rgba(255,255,255,1)，仍会在快速滚动帧中短暂透出下层内容。这不是bug，是渲染管线优化导致的瞬时未填充。
- 临时加固方案：给sticky元素加
backface-visibility: hidden，强制创建独立合成层 - 更稳妥的做法：在sticky元素外再包一层容器，该容器设
background: #fff和position: relative，sticky元素在里面用position: sticky，避免它直接接触可能透出的上下文 - 验证方式：真机上反复滚动并暂停，观察边缘是否有1px灰边或文字残影；有则说明背景未完全覆盖
