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

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

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

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

• javascript
• reactjs
• material-ui

• I don't think alignSelf: 'flex-end' works with position: 'fixed'. - It looks like you have multiple scrolling elements, and the one inside is bigger than the viewport. It looks like the button is aligned to that rather than the viewport – evolutionxbox Commented Jan 12, 2021 at 20:41
• i just tried this, but it returns the same – louis Schneider Commented Jan 12, 2021 at 20:59
• 1 Without a runnable minimal reproducible example I can't help further – evolutionxbox Commented Jan 12, 2021 at 21:01

1 Answer 1

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>