本文讲解为何绝对定位的页脚元素无法通过 `bottom: 93px` 实现预期距页面底边的留白，并提供基于 flexbox 布局的可靠解决方案，避免依赖不可控的 `top`/`left` 僵硬偏移。
在网页布局中，当开发者尝试用绝对定位（position: absolute）配合 bottom: 93px 控制页脚内某个子元素距离视口或文档底部的距离时，常遇到“实际紧贴页面底端，仿佛 bottom: 0”的问题。根本原因在于：bottom 属性仅在元素的包含块（containing block）具有明确高度时才可按预期生效。若
或父容器未设置高度（如 height: 100vh 或 min-height: 100vh），浏览器无法确定“底部参考点”，导致 bottom: 93px 失效——此时元素往往回退到默认文档流末端，视觉上等同于 bottom: 0。更关键的是，您当前采用的纯 top/left 数值定位（如 top: 9999px）存在严重缺陷：它将布局强耦合于页面总高度（可能因内容增减、响应式变化而失效），且完全违背现代 CSS 的弹性设计原则。
✅ 推荐方案：使用语义化
可控页脚间距示例
? 核心要点说明：
- 不要硬编码 top 像素值：top: 9999px 是反模式，极易因内容变化错位；
- bottom 生效的前提是父容器有明确高度：务必设置 html, body { height: 100% } 和 body { min-height: 100vh }；
- 推荐用 padding-bottom 或 margin-bottom 替代 bottom：在 footer 或其子容器上直接添加 padding-bottom: 93px，语义清晰、兼容性极佳；
- Flexbox 是更健壮的页脚沉底方案：flex: 1 撑开主体内容，自然将 footer 推至可视区域底部，再通过内边距精准控制最终留白。
? 补充提示：若必须使用绝对定位（如固定悬浮按钮），请确保其父容器设置了 position: relative 且具有明确高度（例如 height: 100vh），否则 bottom 将失去锚点。但在页脚场景下，Flexbox + 内边距永远是更简洁、可维护、响应式友好的选择。
