sticky元素需配合z-index解决遮挡问题，设置position: sticky和足够高的z-index值，并避免父容器overflow等属性干扰，确保其在层叠中处于顶层。
在使用 CSS 的 position: sticky 时，如果遇到层级显示问题（比如被其他元素遮挡），就需要结合 z-index 来优化层级表现。sticky 定位虽然行为上类似 relative 和 fixed 的混合体，但它的层叠上下文处理方式有其特殊性，理解清楚后能更有效地控制布局。
sticky 定位的基本原理
sticky 元素在未触发“粘性”状态前表现为 relative，滚动到特定阈值后则像 fixed 一样固定在视口某位置。但它必须在文档流中存在，并且依赖父容器的滚动行为才能生效。
常见用法：
position: sticky;top: 0;
这会让元素在滚动到距顶部 0px 时开始“吸附”在视口顶部。
立即学习“前端免费学习笔记（深入）”；
z-index 对 sticky 是否有效？
有效，但有条件。 只有当 sticky 元素创建了新的层叠上下文（或处于一个可比较的堆叠环境）时，z-index 才会起作用。
以下情况会影响 z-index 生效：
- 父元素设置了 overflow: hidden, auto, scroll，可能截断 sticky 效果或影响层叠
- 兄弟元素也设置了定位且拥有更高的 z-index
- 没有显式设置 z-index，导致默认层叠顺序混乱
如何正确组合 sticky 与 z-index
要让 sticky 元素始终显示在顶层，推荐以下做法：
- 为 sticky 元素设置 position: sticky 同时添加 z-index: 1 或更高值
- 确保该元素是定位元素（即 position 不是 static）
- 避免祖先元素形成剪裁或层叠限制（如不必要的 transform、will-change 或 opacity
- 若页面有导航栏、弹窗等也需要设置 z-index，建议统一规划层级体系，例如：
header { z-index: 10; }
.sticky-nav { position: sticky; top: 0; z-index: 11; }
.modal { z-index: 100; }
实战注意事项
实际开发中常出现 sticky 被 dropdown、banner 或伪元素遮挡的问题，原因通常是：
- 其他组件用了绝对定位但 z-index 更高
- sticky 元素未设置 z-index，按 DOM 顺序堆叠
- 父容器 overflow: hidden 导致 sticky 失效
解决方法：给 sticky 元素加 z-index: 99 并确认其容器不干扰层叠，必要时设置 will-change: transform 强制提升图层（谨慎使用）。
基本上就这些。只要记住：sticky 需要定位上下文，z-index 控制层级，两者配合才能稳定实现“吸顶”效果不被遮挡。
