使用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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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 防止内容被遮住
- 在弹窗或表单页中更推荐使用局部绝对定位
