Hamburger menu（汉堡菜单）点击后叠加层关闭X图标不显示问题咨询

问题原因 #

本质是层级堆叠顺序错误导致：
你的菜单叠加层.menu使用了position: fixed定位，且DOM结构在汉堡按钮之后，没有显式设置z-index的前提下，后渲染的固定定位元素层级默认高于前面的绝对定位汉堡容器，菜单激活后会直接覆盖在汉堡图标上方，导致X图标被遮挡看不见。

解决方案 #

第一步：给汉堡容器设置更高的层级，保证它始终在菜单上层

给.menuToggle .hamburger新增z-index属性，值只要高于菜单的层级即可：

.menuToggle .hamburger {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 50px;
  margin: 1.5rem;
  z-index: 999; /* 新增这行即可 */
}

可选优化：适配任意背景色的图标显示

如果担心X图标颜色和菜单背景色对比度不够，可以单独给激活状态下的X线条设置高对比度颜色，比如：

.menuToggle input:checked + .hamburger > .middle,
.menuToggle input:checked + .hamburger > .x-line {
  background: #ffffff; /* 可根据设计需求调整，也可使用CSS变量适配多主题场景 */
}

修改完成后即可实现任意菜单背景色下，X图标都正常显示的需求。

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