如何将一个组件覆盖在另一个组件之上

Question

我想实现一个浮动操作按钮，并且想将其覆盖在组件的其他部分上，但无论如何它都位于其他组件下方，即使我尝试在父组件中实现它也是如此。

我想从材质 UI浮动操作按钮来实现它

这是我之前尝试过的：

const fabstyle = {
        margin: 0,
        top: 'auto',
        right: 20,
        bottom: 20,
        color:'green',
        left: 'auto',
        position: 'fixed',
};
return (
    <div >
        <Fab style={fabstyle}></Fab>
    </div>
)

Answer 1

有多种方法可以实现这一点，一种是使用网格，另一种更简单的方法是使父组件相对（位置：相对）和子组件绝对（位置：绝对）。

然后您可以使用以下值定位子元素： * top、left、bottom和right

.parent {
    position: relative;
}

.children {
   position: absolute;
   top: 0;
   left: 0;
}

在上面的示例中，子组件将渲染在父组件的左上角