React侧边栏切换按钮设高z-index仍被遮挡，如何始终显示？

核心原因 #

你设置的z-index没生效，是因为z-index只在同一堆叠上下文内生效。你的按钮是侧边栏容器的子元素，而侧边栏的堆叠层级（z-index）可能低于主内容容器，导致即使按钮自身z-index很高，也会被主内容挡住——因为它的父元素层级不够。

两种解决办法 #

办法1：把按钮移出侧边栏容器

把按钮放到侧边栏和主内容的同级DOM层级，脱离侧边栏的堆叠上下文限制：

// 调整React结构
<div className="sidebar">
  {/* 侧边栏原有内容 */}
</div>
<label className="sidebar-toggle">CLICKME!</label>
<div className="main-content">
  {/* 主内容 */}
</div>

然后调整按钮CSS，确保它的定位不受侧边栏影响：

.sidebar-toggle {
  position: absolute;
  top: 1rem;
  /* 根据侧边栏状态动态调整left值，比如展开时left:230px，折叠时left:0 */
  left: 230px; 
  z-index: 99999;
  padding: 0.5rem 0.65rem;
  color: #505050;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

办法2：提升侧边栏的堆叠层级

如果不想改动DOM结构，直接给侧边栏容器设置更高的z-index，让它的所有子元素（包括按钮）都能覆盖主内容：

/* 找到侧边栏的样式，添加z-index */
.sidebar {
  position: relative; /* 确保z-index生效，因为position默认static时z-index无效 */
  z-index: 9999;
  /* 侧边栏原有样式 */
}

这样按钮作为侧边栏的子元素，会继承父元素的堆叠上下文，自然就能显示在主内容上方，不用给按钮加!important也能生效。

补充说明 #

• 不要随便用!important，优先通过调整堆叠上下文层级解决问题；
• 检查主内容容器是否设置了position: relative/absolute/fixed+z-index，如果有，侧边栏的z-index必须大于这个值。

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