如何在父级的同级叠加上显示子级元素

Question

我的react组件上存在z-index堆叠的问题。代码库非常复杂，当我尝试从here提出建议时，它不起作用。简化的问题可能像this。

我想做的只是在打开侧边栏菜单时默认做一个背景覆盖（默认情况下它是隐藏的）。侧边栏菜单是顶部导航栏的子菜单。 div叠加背景是顶部导航栏的同级。

类似这样的东西：

<div className="overlay" />
<TopNavbar>
  <SideMenuBar>
  </SideMenuBar>
</TopNavbar>

TopNavbar的z-index = 900。 如果我将div叠加层的z-index设置为901，并将SideMenuBar z-index设置为902，则div叠加层仍将覆盖所有屏幕。 如果将div overlay z-index设置为900，它将覆盖背景，但不会覆盖TopNavbar。

当我读here时，我想知道的另一个问题是： 为什么demo在span5的z索引小于span 2、3和4时可以正常工作？

Answer 1

在这种情况下，React门户将帮助根据需要在所需的DOM中呈现子元素，以便您可以轻松处理元素的分层。

  

门户提供了一种将子级呈现到DOM节点中的一流方法   存在于父组件的DOM层次之外的

请按照本教程操作，这将帮助您摆脱问题click