当为侧边菜单添加背景图案后，关闭按钮及菜单项无法点击，根本原因在于 #menu-background-pattern 的 z-index 值过高，覆盖了可交互元素；只要合理调整各元素的层叠顺序，即可恢复正常点击功能。
最近在调试一个侧边菜单时，遇到了一个相当常见的小麻烦：给菜单加上漂亮的背景图案之后，关闭按钮和菜单项居然点不动了。从表面看，样式显示一切正常，按钮也清晰可见，但鼠标就是无法触发任何事件。折腾了许久，最终锁定在 CSS 的层叠上下文问题上——既不是 JavaScript 逻辑写错，也不是 HTML 结构有问题，纯粹是 z-index 这个老朋友又在背后搞事。
具体来说，问题出在下面这段 CSS 代码中：
#menu-background-pattern { z-index: 5; /* ❌ 这个值太高，盖住了关闭按钮和菜单项 */}
#closebtn 和 #menu-items 在 DOM 结构里的确排在 #menu-background-pattern 之后，但 z-index 只对定位元素（position 不是 static）才生效。更要命的是，它们的层叠顺序还受到父容器 stacking context 的限制。父级 #menu 自己设置了 z-index: 3，所以其内部所有子元素的 z-index 都只能在这个小范围内比较。#menu-background-pattern 设成了 5，而 #closebtn 默认没有 z-index（相当于 0），#menu-items 设的是 4。结果就是背景图案直接压在按钮和菜单项上面，所有点击事件全被它拦截了。
解决方案其实很简单：把交互元素的层级提上去，让背景图层老老实实待在底下当装饰。
#closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
color: white;
z-index: 9; /* ✅ 比 background-pattern 高，确保能点击 */
}
#menu-items {
margin-left: clamp(4rem, 20vw, 48rem);
position: relative;
z-index: 4; /* ✅ 保持高于菜单背景色，但低于 closebtn */
}
#menu-background-pattern {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0; /* ✅ 降到最底层，乖乖当装饰 */
/* 其余样式保持不动 */
}
同时，JavaScript 部分也可以优化一下，把内联的 onclick 换成事件委托，代码更干净，维护起来也更方便：
document.getElementById('openMenuButton').addEventListener('click', () => {
document.getElementById('menu').style.width = '100%';
});
document.getElementById('closebtn').addEventListener('click', () => {
document.getElementById('menu').style.width = '0';
});
这里有几个需要留意的关键点，值得专门记一下：
- z-index 只对定位元素（position: relative/absolute/fixed/sticky）有效，浮动元素或 static 位置的元素即使设置了 z-index 也不会生效；
- 父容器的 z-index 会创建新的 stacking context，子元素之间的 z-index 只在那个上下文中才有意义，不能跨层对比；
- 不要一上来就写 z-index: 9999，按逻辑层级有序设置就好——比如背景 = 0，内容 = 4，控件 = 9，这样既清晰又稳定；
- 调试时可以利用开发者工具的「Layers」面板或「Computed」标签，实时验证元素的渲染顺序，比凭感觉瞎猜靠谱多了。
如果还希望体验更细腻一些，可以给滚动条加个定制样式，比如菜单项内容溢出时的处理：
/* WebKit 滚动条美化（适用于 menu-items 内容溢出时） */
#menu-items::-webkit-scrollbar {
width: 8px;
}
#menu-items::-webkit-scrollbar-track {
background: rgba(255,255,255,0.05);
}
#menu-items::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 4px;
}
改完之后，菜单打开关闭都变得很顺畅，所有链接和关闭按钮都能正常触发。视觉与功能这时才真正达成一致，不再互相打架。
