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

Question

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

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

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

<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>

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

我也尝试过在其中放置另一个 Paper，但它最终会垂直“低于”我的组件。

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

我该怎么做？

Answer 1

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