Z-index不稳定偶发失效：粘性标签页滚动时层级有时正常有时异常

可能的问题原因 #

• 层叠上下文被意外创建：z-index不是全局生效，仅在当前元素所属的层叠上下文内有效。如果页面中前几个tab的兄弟元素、或父级元素被设置了transform、opacity<1、filter、will-change等属性，会意外创建层叠上下文，打乱预设的层级顺序，导致后面的tab和文本无法覆盖前面的元素。
• sticky元素层级规则不匹配：多个sticky元素同属一个父容器时，默认DOM顺序靠后的元素层级更高，但如果前面的元素手动设置了高于后续元素的z-index，就会出现后面的tab被前面的覆盖的情况。另外如果父容器.wrapper设置了overflow相关属性，也会干扰sticky元素的层级计算和吸顶行为。
• 动态z-index赋值逻辑缺陷：如果是通过JS监听滚动事件动态修改元素z-index，很可能是滚动事件的防抖/节流逻辑导致触发时机异常，或是判断tab吸顶状态的逻辑有遗漏，没有给第5、6个tab正确设置更高的z-index。移动端滚动事件的触发频率和桌面端不一致，所以异常出现概率更高。
• 文本容器层级被限制：#arttext5和#arttext6分别被包裹在#pubtext和#coltext中，如果这两个父容器没有设置正确的position属性和z-index，内部子元素的z-index再高也只会在父容器层级内生效，父容器层级低于已吸顶tab的话，文本自然会显示在下层。

修复建议 #

• 用浏览器开发者工具的Layers面板排查所有相关元素的层叠上下文归属，确认所有tab和文本容器都属于同一个根层级的层叠上下文，移除不必要的会触发层叠上下文的属性。
• 直接在CSS中按tab的DOM顺序写死递增的z-index值，比如#tab1设为10、#tab2设为20，依次类推到#tab6设为60，不需要通过JS动态修改z-index，避免滚动事件触发异常导致的层级失效。
• 检查父容器.wrapper的overflow属性，不要设置overflow: hidden/auto/scroll，如果必须设置overflow-x: hidden，要额外确认没有影响sticky元素的包含块计算。
• 给#pubtext和#coltext都设置position: relative，z-index和对应的tab保持一致，确保内部的文本元素层级不会被下层的tab覆盖。

内容的提问来源于stack exchange，提问作者C.B