how to show a floating action button always in bottom of screen

Tags: , ,

I’m using material ui

I have a floating action button and I want to show it a specific place that would not change with scroll,

and also I want to know if it is a fine problem

here is the code

  const floatingMenuButtonStyle = {
    backgroundColor: '#DEEAF6',
    color: '#8A3473',
    alignSelf: 'flex-end',
    position: 'fixed',
    bottom: '8%',
    right: '9%'

here is floating action button

          children={<AddIcon fontSize='default' />}></Fab>


The html and css does it well like this.

All you need to do is to simply parent it in a <div> element with position:fixed and then next your icon as a child with position:absolute and it gets positioned at the bottom right as you wanted.

just like this sample green box

<div style="
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;">

    <div style="
        position: absolute;


Source: stackoverflow