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

我希望在组件锁定时，在组件上有一个带

Review

组件根是在这篇

文章

中包含大量其他元素的元素。页面上有六个这样的特殊元素。当每个元素的

locked===true

时，我希望在review元素的顶部放置一些居中的东西（垂直和水平）

我发现元素可以很好地工作，因为它可以移动到中心。但是，作为一种模式，它不允许与页面的其余部分进行交互

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

Popover的内容。

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

{（{TransitionProps}）=>(
波普尔的内容。
)}

这将元素垂直放置在顶部（y轴）my

anchorEl

。。。这不是我想要的

我还试着在那里放另一张

纸

，但它只是垂直地“在”我的组件下面

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

---

我怎样才能做到这一点呢？

如您所说，使用绝对定位，但您必须给父组件/元素

显示：relative

。绝对定位从非静态定位的最近祖先开始工作

如您所说使用绝对定位，但您必须给父组件/元素显示：相对。绝对定位从非静态定位的最近祖先开始工作

当我将其设置为{display:relative}时，整个应用程序似乎会重新排列……具体来说：当我将组件中的子纸张设置为{display:relative}时，整个应用程序似乎会重新排列（具体地说，这些组件的系列会丢失间距，并且表示相关组件根的母纸不再位于文本的“标题”部分下…）这就像它收缩了纸张的整个剩余部分，并删除了填充/边距}。这种更改会影响父组件吗？当我将其设置为{display:relative}时，整个应用程序似乎会重新排列……具体地说，当我将组件内的子纸张设置为{display:relative}时整个应用程序似乎在重新排列（特别是，这些组件的系列失去了间距，并且表示相关组件根的母纸不再位于文本的“标题”部分下…）这就好像它收缩了纸张的整个剩余部分并删除了填充/边距}。这种更改会影响父组件吗？