将一个反应组件放在（z 轴）另一个上

Question

当组件被锁定时，我想在组件上加一个带子。

Review组件根是一个Material UI Paper元素，在此Paper中有许多其他元素。 页面上有六个这样的特定元素。 当每个元素locked===true时，我想要一些东西放在评论元素的顶部，居中（垂直和水平）。

我发现Popover元素可以正常工作，因为它可以移动到中心/中心。 但是，作为 Modal，它不允许与页面的 rest 交互。

<Popover
    id={"id"}
    open={Boolean(anchorEl)}
    anchorEl={anchorEl}
    onClose={handleClose}
    anchorOrigin={{
        vertical: 'center',
        horizontal: 'center',
    }}
    transformOrigin={{
        vertical: 'center',
        horizontal: 'center',
    }}
>The content of the Popover.</Popover>

然后我确保anchorEl 指向正确的Paper。 这适用于“popover”... popper 元素，它不在模态树中（因此允许多个并且不会窃取对整个应用程序的控制）没有所需的定位。

<Popper id={'popperID'} open={Boolean(anchorEl)} anchorEl={anchorEl} placement={'top'} transition>
  {({ TransitionProps }) => (
    <Fade {...TransitionProps}>
      <div className={classes.busy}>The content of the Popper.</div>
    </Fade>
  )}
</Popper>

这将元素垂直放置在我的anchorEl顶部（y 轴）......这不是我想要的。

我也试过把另一Paper放在那里，但它只是垂直地“低于”我的组件。

编辑：值得注意的是，我还尝试使用 CSS 对其进行 position。 问题是绝对定位（应该 position 它相对于父级）似乎 position 它相对于整个应用程序而不是 JSX 父级/组件。

我怎样才能做到这一点？

Answer 1

如您所说，使用绝对定位，但您必须给父组件/元素display: relative 。 绝对定位从最近的非静态定位的祖先开始工作。 https://www.w3schools.com/cssref/pr_class_position.asp