时间戳

首页 > 解决方案 > 如何将一个组件覆盖在另一个之上

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

问题描述

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

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

这是我以前尝试过的：

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

标签： javascriptreactjs

解决方案

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

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

.parent {
    position: relative;
}

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

在上面的示例中，子组件将呈现在父组件的左上角

推荐阅读