使用 Materialize 框架创建浮动按钮需结合 btn-floating 类与图标，通过 fixed-action-btn 容器和 position: fixed 定位实现右下角悬浮效果，确保 z-index 避免遮挡，最终生成醒目操作按钮。
在使用 Materialize 框架时，浮动按钮（Floating Action Button, FAB）是一种常见且实用的 UI 元素，通常用于突出主要操作，比如“添加新项目”或“返回顶部”。你可以通过简单的 HTML 和 CSS 类来创建并控制其位置。
创建基本的浮动按钮
Materialize 提供了预设的类来快速生成浮动按钮。使用 btn-floating 类创建圆形按钮，并结合图标展示功能。
<a class="btn-floating btn-large red"> <i class="material-icons">add</i> </a>
这会生成一个红色的圆形按钮，中间显示“add”图标。常用的图标来自 Google 的 Material Icons 字体，需确保已引入该字体库。
设置浮动按钮的位置
Materialize 不直接提供定位类（如固定在右下角），但你可以结合自定义 CSS 或辅助类来控制按钮位置。
立即学习“前端免费学习笔记（深入）”；
常见做法是将按钮放在页面角落，例如右下角。可以通过包裹一个容器并使用绝对定位实现：
<div style="position: fixed; bottom: 30px; right: 30px; z-index: 99;">
<a class="btn-floating btn-large red">
<i class="material-icons">add</i>
</a>
</div>
- position: fixed：让按钮相对于视口固定位置
- bottom 和 right：控制距离底部和右侧的距离
- z-index：确保按钮不会被其他元素遮挡
使用内置网格辅助定位（可选）
如果你已在使用 Materialize 的布局结构，也可以结合 row 和 col 容器，并添加自定义样式进行微调。
例如：
<div class="fixed-action-btn" style="position: fixed; right: 24px; bottom: 24px;">
<a class="btn-floating btn-large green">
<i class="material-icons">mode_edit</i>
</a>
</div>
注意：fixed-action-btn 是 Materialize 中用于扩展型 FAB 的容器类，即使你只用单个按钮，也可借用它来统一风格。
基本上就这些。通过组合 Materialize 的样式类与少量自定义 CSS，就能轻松实现美观且定位准确的浮动按钮。
