使用position: fixed可将按钮固定在页面底部，通过bottom和left配合transform实现居中；若需固定在容器内，则父元素设为relative，子元素用absolute定位；适配移动端时应添加env(safe-area-inset-bottom)避免系统UI遮挡，并建议通过padding-bottom防止内容被覆盖。
要让按钮固定在页面底部，使用 CSS 的 position: fixed 是最直接有效的方法。这种方式可以让元素相对于浏览器窗口固定定位，即使页面滚动，按钮依然停留在设定位置。
1. 基础实现：position: fixed + bottom
将按钮的定位设置为 fixed，并通过 bottom 属性将其固定在视窗底部。示例代码：
.fixed-button {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
说明：
- bottom: 20px 控制按钮距离底部的距离
- left: 50% + transform: translateX(-50%) 让按钮水平居中
- 按钮始终固定在视窗底部，不随内容滚动
2. 固定在容器底部（局部固定）
如果希望按钮固定在某个容器内部的底部，应使用 position: absolute 配合父元素 position: relative。HTML 结构：
<div class="container"> <p>页面内容...</p> <button class="abs-bottom-btn">提交</button> </div>
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.container {
position: relative;
min-height: 300px;
padding: 20px;
}
.abs-bottom-btn {
position: absolute;
bottom: 10px;
left: 10px;
padding: 8px 16px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
}
注意：父容器必须设置 position: relative，否则绝对定位会相对于整个页面。
3. 兼容移动端与安全区域
在 iPhone 等设备上，底部可能有操作条（如 Home Indicator），需避免按钮被遮挡。优化方案：
.fixed-button {
position: fixed;
bottom: env(safe-area-inset-bottom, 20px);
left: 50%;
transform: translateX(-50%);
padding: 12px 24px;
...
}
env(safe-area-inset-bottom) 能自动适配安全区域，防止按钮被系统UI遮挡。
4. 避免遮挡内容的建议
固定按钮可能会覆盖页面底部内容，建议：- 给页面主体添加 padding-bottom，留出按钮空间
- 或使用 margin-bottom 防止内容被遮住
- 在弹窗或表单页中更推荐使用局部绝对定位
