CSS滚动时下拉选项遮挡sticky吸顶页头问题解决（滚动条已刻意隐藏）

• 优先排查最常见的层叠遗漏问题
  实现position: sticky吸顶页头时，一定要给页头根元素显式设置足够高的z-index值，比如配置z-index: 1100。sticky元素的层叠规则和fixed、absolute定位不完全一致，如果不主动声明z-index，会和页面内的常规块级元素处于同一层叠层级，后渲染触发的下拉组件就会自然浮到页头上方，这也是和描述的滚动异常表现完全匹配的最高发诱因。
• 排查隐藏的高层叠触发属性
  顺着下拉组件的DOM树逐层向上检查，是否存在transform、backdrop-filter、filter、will-change这类会强制创建独立层叠上下文的CSS属性。这类属性触发的层叠优先级不受元素本身z-index控制，如果父容器的层叠优先级高于未设置z-index的sticky页头，哪怕下拉组件本身的z-index数值很低，也会穿透浮到页头上方。遇到这类情况可以把对应父容器的z-index降到页头层级以下，或者直接给页头设置全局最高的层叠优先级。
• 对齐滚动容器的定位参照
  既然站点是刻意设置隐藏滚动条的，需要确认滚动事件的实际绑定载体：如果页面的滚动不是基于根文档流实现，而是嵌套在某个带overflow: auto/scroll的内部容器里，sticky页头的定位参照系就是这个内部容器，而很多组件库的下拉默认是挂载到全局body节点渲染的，两者定位参照不一致就会出现滚动时的位置错位、层级穿透。这时候可以把下拉组件的挂载位置调整到和sticky页头同一个滚动容器内，统一定位参照标准。
• 避开单独调z-index的常见误区
  CSS的层叠优先级是按整棵DOM的层叠链计算的，不是只看单个元素自身的z-index数值。不要单独给下拉组件设置极高的z-index试图把它压到页头下面，很容易连带造成其他浮层组件的层级混乱，要从层叠链的根源上对齐各模块的优先级顺序。

内容的提问来源于stack exchange，提问作者yanko