WordPress Twenty 24子主题：子菜单与画廊层级冲突问题求助

问题分析 #

核心是z-index层级管理：子菜单需要高于画廊，但灯箱（放大图片）必须是页面最高层级，覆盖所有元素。之前用极端值z-index导致子菜单盖过灯箱，根源是没给灯箱设置更高的层级。

具体解决方案 #

在Twenty 24子主题的自定义CSS（外观→自定义→额外CSS）中添加以下代码：

1. 给子菜单设置合适层级，确保显示在画廊上方

/* 适配Twenty 24主题的导航子菜单 */
.wp-block-navigation__submenu-container {
    position: absolute;
    z-index: 100; /* 只要高于画廊默认z-index即可，无需极端值 */
}

2. 提升灯箱容器层级，确保放大图片覆盖所有菜单

/* 调整Responsive Lightbox and Gallery插件的灯箱层级 */
.rlg-lightbox-container {
    z-index: 1000 !important; /* 数值需大于子菜单的z-index */
}

验证与调整 #

• 用浏览器开发者工具（F12）检查画廊元素的z-index，如果子菜单的100不够，可适当调高，但保持低于灯箱的1000。
• 若灯箱的类名不是rlg-lightbox-container，直接在开发者工具中选中灯箱弹窗元素，复制其类名替换即可。

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