React中重叠Flex面板双按钮可点击的无JavaScript方案咨询

方案一：精准控制pointer-events #

通过给上层的.center面板设置pointer-events: none，让面板本身不拦截任何点击事件，同时单独恢复面板内按钮的点击能力，这样下方.left面板的按钮就能正常接收点击。

修改后的SCSS代码：

.bottom-panel {
  position:absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  
  &.left {
    justify-content: start;
  }
  
  &.center {
    justify-content: center;
    pointer-events: none; // 面板本身不响应点击
    button {
      pointer-events: auto; // 按钮恢复可点击状态
    }
  }
}

方案二：提升左侧按钮层级 #

给.left面板内的按钮设置相对定位和更高的z-index，让按钮直接显示在.center面板上方，避免被遮挡。

修改后的SCSS代码：

.bottom-panel {
  position:absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  
  &.left {
    justify-content: start;
    button {
      position: relative;
      z-index: 1; // 让按钮层级高于上层面板
    }
  }
  
  &.center {
    justify-content: center;
  }
}

两种方案都能满足你「保持面板宽度100%、拆分组件解耦」的需求，无需引入JavaScript。

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