javascript - 如何始终在屏幕底部显示 float 操作按钮

Question

我正在使用material ui

我有一个 float 操作按钮，我想向它显示一个不会随滚动而改变的特定位置，

我也想知道这是否是一个好问题

这是代码

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

这是 float 操作按钮

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

Answer 1

html 和 css 就这样做得很好。

您所需要做的就是简单地将其父级放在 <div> 中。元素为 position:fixed然后你小时候的图标是 position:absolute它会根据您的需要定位在右下角。

就像这个示例绿框

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