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

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

   <Fab 
        style={floatingMenuButtonStyle}
         aria-label="add"
          children={<AddIcon fontSize='default' />}></Fab>
      }

Answer

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="
        width:130px;
        height:130px;
        position: absolute;
        background-color:green;">
    </div>

</div>

Advertisement

Answer