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

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

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

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

• javascript
• reactjs

3 Answers 3

there are multiple ways to achieve this one is with grid, the other which is simpler is making your parent ponent relative (position: relative) and the children ponent 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 ponent

Make your parent ponent Position Relative & child ponent Position Absolute. It will enable you to position your child element the way you want.

#Parent {
position: relative;
}

#Child {
position: absolute;
//Set the top,left,bottom & right properties the way you want to style your ponent
}

You can use the z-index property in the CSS class

Usage:

.myBoxOnTop {
    z-index: 3;
}

.myBoxOnBottom {
    z-index: 2;
}