WordPress搭配Avada主题粘性头部时z-index属性不生效问题咨询

常见认知误区 #

很多开发者踩过的典型坑：默认“z-index值越高元素层级就越靠上”，甚至拼命给元素加几十万的z-index值，最后还是被其他元素挡住，本质就是没搞懂z-index的生效边界：

• z-index属性仅对设置了非static定位值的元素生效，静态定位元素就算写了再大的z-index值，浏览器也不会将其纳入层级排序逻辑
• 所有z-index的层级对比，仅在同一堆叠上下文范围内有效。如果两个元素分属独立的堆叠上下文，两者自身的z-index值没有任何直接比较意义，最终显示层级由两个堆叠上下文的根节点层级决定，而非内部元素的z-index大小。

对应场景的异常根因 #

从现有配置排查，出现该问题的核心是堆叠上下文隔离：

• Avada粘性头部自身的z-index仅为10011，但它被包裹在一个全局优先级极高的堆叠上下文根容器内——这类容器通常是主题为实现粘性固定效果，给外层加了固定定位、transform、will-change等触发独立堆叠上下文的属性
• 给.fdm-ordering-sidescreen设置200000的z-index之所以无效，是因为这个侧屏元素被嵌套在一个层级远低于头部堆叠上下文的容器内，不管侧屏自身的z-index设多大，整个侧屏所属的层级组整体都处于头部层级组的下层，自然无法显示在头部上方。

排查与修复操作步骤 #

• 使用浏览器开发者工具，逐层遍历.fdm-ordering-sidescreen的所有父级元素，检查每个父节点是否存在触发独立堆叠上下文的属性（包括非static定位搭配非auto的z-index、小于1的opacity值、transform、filter、will-change、backdrop-filter等）
• 定位到侧屏元素所属的堆叠上下文根节点，对比该根节点与Avada粘性头部所属堆叠上下文根节点的层级，直接将侧屏所属根节点的z-index调整到高于头部根节点的层级即可，无需给侧屏本身堆砌超高z-index值
• 校验自定义样式的选择器权重：Avada主题的内置组件样式普遍使用高权重选择器（多层类嵌套、ID选择器），如果仅用单类选择器写z-index规则，可能因为权重不足被主题默认样式覆盖，导致样式实际没有生效。

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