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

我的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的另一个问题是：
为什么当span5的z索引小于span 2、3和4时，此demo可以正常工作？

最佳答案

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


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


请遵循本教程，这将帮助您摆脱此问题click

关于html - 如何在父级的同级叠加上显示子级元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53037999/