How to overlay a component on top of another

Question

I want to implement a floating action button and I want to overlay it on other pieces of a component but in anyways it goes under the other components, even when I try to implement it in the parent component.

I want to implement it from material UI Floating action button

Here is what I've tried before:

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

there are multiple ways to achieve this one is with grid, the other which is simpler is making your parent component relative (position: relative) and the children component absolute (position: absolute).

Then you can position the children element with the values: *top, left, bottom and right

.parent {
    position: relative;
}

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

In the example above, the children will be rendered in the top left corner of the parent component