WordPress Frejya主题粘性头部#mini-header无法置于内容上方求助

问题根源 #

z-index的层级生效不仅看自身值，还受堆叠上下文和元素position属性的约束：

• 只有position为fixed/absolute/relative/sticky的元素，z-index才会生效；
• 子元素的z-index仅在父元素创建的堆叠上下文内有效，如果父元素的堆叠上下文层级低于文本框所在的上下文，子元素z-index再高也无法突破。

具体修复步骤 #

1. 确认#mini-header的position属性
   打开浏览器开发者工具，选中#mini-header，检查它的position是否为fixed（粘性头部通常用fixed实现滚动后固定）。如果是static，先设置：

   #mini-header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
   }
   

2. 提升父容器的堆叠上下文层级
   找到#mini-header的直接父容器（可通过开发者工具查看主题实际的包裹元素，比如.site-header），给父容器设置非static的position和足够高的z-index：

   /* 替换为实际的父容器选择器 */
   #mini-header-parent {
     position: relative;
     z-index: 9999;
   }
   

3. 给#mini-header设置更高的z-index
   在父容器的堆叠上下文内，给#mini-header设置比文本框更高的z-index：

   #mini-header {
     z-index: 10000;
   }
   

4. 排查文本框的堆叠上下文干扰
   选中覆盖头部的文本框，检查它的父元素是否存在transform/opacity/filter等属性（这些属性会强制创建独立的堆叠上下文）。如果有，要么调整这些属性，要么确保头部父容器的z-index远高于文本框所在的上下文层级。

验证方法 #

用浏览器开发者工具的「Elements」面板：

• 右键#mini-header选择「Inspect」，在「Styles」面板确认position和z-index设置；
• 选中文本框，对比它与头部父容器的z-index层级，确保头部的上下文层级更高。

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