浮动操作按钮未粘在其父元素上

Question

我正在使用Material UI v4库来构建 React Js 应用程序。

我创建了一个自定义浮动操作按钮 (FAB) 组件。

FAB 组件（下图中的红色框）必须粘贴到其父元素即 Flyout 组件（下图中的蓝色框）的右下角（有一些边距）。

Fylout 组件内部有一些子组件。它们是标题、Content 组件（Material UI 中的示例 Card 组件）和 FAB 组件。

由于某种原因，Flyout 组件的根元素必须具有absolute position可滚动 ( scroll: 'auto')（我无法在此处提及它们）。

我用于absolute positionFAB 组件。结果很好（当卡未展开时），如下图所示：

但是，当 Card 组件展开并且我们滚动 Flyout 组件时，FAB 组件并没有从其父组件中粘住更多，如下面的屏幕截图所示：

我尝试position: 'sticky'将 FAB 组件与bottom: 20和 一起使用right: 20，但 FAB 并未粘在 Flyout 组件的右下角，如下面的屏幕截图所示：

所以我的问题是如何使 FAB 按钮仅粘在 Flyout 组件的右下角？

这是简化的代码：https ://codesandbox.io/s/fab-stick-to-parent-w5ng3

Answer 1

由于我没有足够的声誉来发表评论，所以我必须回答这个问题。

替换position: absolute;为position: fixed;对我有用。

元素相position: fixed;对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。

最终代码：

makeStyles-addButton-9 {
    right: 40px;
    bottom: 40px;
    position: fixed;
}