在WordPress中使用PhotoSwipe时菜单遮挡图库、z-index设置无效如何解决？

问题根源 #

你设置的z-index不生效，核心原因是层叠上下文限制：子元素的z-index只能在父元素的层叠上下文范围内生效，若PhotoSwipe容器被嵌套在一个层级低于菜单的父元素内，就算给子元素设置再高的z-index也无法超出父元素的层级上限。

排查步骤 #

• 第一步：确认PhotoSwipe容器的DOM位置
  检查你写的.pswp容器是否嵌套在header、content这类页面模块父容器里，父容器如果设置了position: relative/absolute/fixed、transform、opacity < 1、will-change等属性，就会创建独立层叠上下文，限制子元素的层级表现。
• 第二步：验证z-index生效条件
  z-index只对position属性非static的元素生效，确认官方PhotoSwipe默认的position: fixed属性没有被主题CSS覆盖。
• 第三步：确认菜单实际层级
  打开浏览器开发者工具（F12），选中遮挡的菜单元素，查看「计算样式」面板里的z-index数值，确认目标层级阈值。
• 第四步：检查自定义CSS优先级
  你添加的CSS可能被优先级更高的主题、插件样式覆盖，WordPress场景下可以将自定义CSS放在「外观→自定义→额外CSS」输入框，此处加载的样式默认优先级最高。

修复方案 #

1. 调整DOM结构：将整个.pswp容器的代码剪切到</body>闭合标签之前，作为页面根节点的直接子元素，彻底脱离父元素层叠上下文限制。
2. 修正CSS配置：不要设置过大的z-index（数值超过2^31-1会被浏览器溢出重置为0，你写的19位9早已超出浏览器支持上限），改为如下配置：

.pswp {
  position: fixed !important;
  z-index: 999999 !important;
}

3. 临时验证：如果要快速确认是否是层级问题，可以打开浏览器控制台输入以下代码，即时测试效果：

const pswp = document.querySelector('.pswp')
pswp.style.position = 'fixed'
pswp.style.zIndex = '999999'

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