將一個反應組件放在（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