如何让菜单选项层级显示在Contact Form 7字段选项前方

前端开发中遇到层级显示异常：需要实现菜单选项堆叠显示在Contact Form 7表单字段上层，已尝试将菜单z-index设置为10、表单z-index设置为9修复，但异常仍然存在，异常表现参考截图：

z-index属性不生效基本都是两个原因导致的：

• 元素本身没有设置非static定位：z-index仅对position值为relative/absolute/fixed/sticky的元素生效，默认static定位下设置z-index完全无效。
• 层叠上下文限制：如果菜单的任意祖先元素创建了独立层叠上下文，且该祖先元素的层级比表单所在层叠上下文低，那么给菜单本身设置再高的z-index，也无法突破父级的层级限制。

1. 先给目标元素补定位属性
   给菜单容器添加如下样式，注意将选择器替换为你项目中菜单对应的实际DOM选择器：

.header-menu-container {
  position: relative;
  z-index: 10;
}

给Contact Form 7表单容器添加样式：

.wpcf7-form {
  position: relative;
  z-index: 9;
}

2. 补完定位仍不生效则排查层叠上下文
   沿菜单DOM节点向上逐级检查所有父元素，只要父元素存在以下任意一种情况，就会创建独立层叠上下文：

• 设置了非static的position值，且配置了具体数值的z-index
• opacity值小于1
• 添加了transform、filter、perspective属性
• will-change属性设置为transform、opacity等会触发合成层的值
• 是flex/grid布局的子元素，且本身设置了z-index值
  找到层级更低的菜单父级层叠上下文元素后，直接将该父元素的z-index调整到高于表单容器的z-index即可，无需反复修改菜单本身的z-index数值。

3. CF7表单特殊适配
   部分主题会给CF7的下拉、输入框等字段添加transform属性强制提升层级，若以上操作仍有遮挡，可给菜单下拉面板添加样式强制提升层级：

.menu-dropdown-panel {
  position: relative;
  z-index: 999;
  isolation: isolate;
}

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