React侧边栏设置position:fixed后内部所有元素无法点击如何解决？

问题成因 #

该问题和React本身无关，属于CSS层叠上下文覆盖导致的交互失效：

• 当元素设置position: fixed时，会脱离普通文档流，若它的层叠顺序（z-index）低于页面中其他同级/父级层叠元素，就会被上层不可见/透明的元素完全覆盖，你点击侧边栏时实际点击的是上层覆盖元素，自然无法触发侧边栏内部元素的交互。
• 删除position: fixed后，侧边栏回归普通文档流，层叠顺序恢复到高于普通块级元素的水平，不会被覆盖，因此交互恢复正常。
• 尝试float定位也出现同样问题，也符合层叠顺序过低被覆盖的特征。

排查验证方法 #

打开浏览器开发者工具（F12），点击元素选择器，直接点侧边栏里无法触发的链接/按钮：

• 如果选中的元素不是侧边栏内部的链接，而是其他页面容器（比如主内容区容器、全局 wrapper 等），即可确认是元素被覆盖导致的问题。

解决方案 #

1. 优先调整z-index（最常用） #

给.nav-left-sidebar类添加足够高的z-index属性，修改后代码如下：

.nav-left-sidebar {
    position: fixed;
    width: 264px;
    height: 100%;
    top: 60px;
    overflow: auto;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);
    box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);
    -webkit-transition: all 0.3s ease;
    /* 新增如下属性，数值只要高于覆盖层的z-index即可，先设9999测试生效后再调整到合理值，避免遮挡模态框等弹出组件 */
    z-index: 9999;
}

如果调整后交互恢复正常，再根据页面其他组件的z-index数值（比如Bootstrap默认顶部导航栏z-index为1030，模态框为1050）调整到合适大小即可。

2. 排查父容器属性 #

如果调整z-index无效，检查侧边栏组件的所有父级容器：

• 是否设置了transform、opacity、filter等会创建新层叠上下文的属性，这类属性会限制子元素的层叠顺序只能在父容器内部生效，若父容器本身z-index低于其他元素，子元素z-index再高也无法突破父容器的层叠限制。
• 是否设置了低于其他页面容器的z-index，可同步调高父容器的z-index处理。

3. 兼容Bootstrap事件绑定（可选排查） #

你当前用的是原生Bootstrap的data-toggle属性控制菜单折叠，Bootstrap的JS依赖真实DOM操作，和React的虚拟DOM机制有可能出现事件绑定失效的情况，如果确认不是元素覆盖问题，可以将折叠交互改为React状态控制，或者引入react-bootstrap库的对应组件替代原生Bootstrap JS功能。

内容的提问来源于stack exchange，提问作者m-0-h