WordPress站点HTML全屏覆盖菜单无法置于顶层显示问题求助

全屏覆盖层不可见的原因及修复方案 #

先做快速定位：按F12打开浏览器开发者工具，切换到「元素」面板，点击菜单触发按钮后找到ID为myNav的元素：

• 若元素style属性里没有width: 100%，属于JS执行问题，参考原因1、4修复
• 若元素width已经是100%但仍不可见，属于样式优先级/父元素限制问题，参考原因2、3修复

具体原因&对应修复方法 #

• 原因1：ID冲突
  WordPress主题或已安装插件可能已经占用了myNav这个ID，导致JS选中的是其他不相关元素，没有修改到你的覆盖层样式。
  修复方案：将ID替换为唯一值，同步修改JS、HTML中的对应引用：

// 修改后JS代码
function customOpenNav() {
  document.getElementById("custom_full_overlay").style.width = "100%";
}
function customCloseNav() {
  document.getElementById("custom_full_overlay").style.width = "0%";
}

<!-- 修改后HTML代码 -->
<div id="custom_full_overlay" class="overlay">
  <a href="javascript:void(0)" style="color: green" class="closebtn" onclick="customCloseNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>  
<span style="font-size:30px;cursor:pointer; color: green" onclick="customOpenNav()">&#9776; open</span>

• 原因2：CSS优先级不足被覆盖
  主题默认样式、插件样式的优先级高于你写的自定义样式，可能覆盖了z-index、position、display等关键属性，之前设置的z-index=2太低也可能被其他顶层元素（比如导航栏、固定头部）挡住。
  修复方案：提升样式优先级，同时把z-index设为足够大的值：

/* 修改后overlay样式，其余样式不变 */
.overlay {
  height: 100% !important;
  width: 0 !important;
  position: fixed !important;
  z-index: 99999 !important;
  top: 0 !important;
  left: 0 !important;
  background-color: rgba(0,0,0, 0.9) !important;
  overflow-x: hidden !important;
  transition: 0.5s !important;
}

• 原因3：父元素样式限制
  如果你的覆盖层HTML插入到了主题模板的中间层级，父元素如果设置了overflow: hidden或者transform属性，会导致fixed定位的覆盖层被裁剪、或者相对父元素定位无法铺满全屏。
  修复方案：将覆盖层的HTML代码移动到主题footer.php文件的</body>结束标签之前，让它成为body的直接子元素，不受其他父节点样式影响。

• 原因4：函数名冲突
  openNav、closeNav可能是主题已经定义过的函数，你写的函数被覆盖没有实际执行。
  修复方案：参考原因1的修改，将函数名替换为自定义的唯一名称即可。

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