通过为固定定位的社交菜单添加与页脚高度相等的 `margin-bottom`，可使其在保持 `bottom: 22px` 视觉位置的同时，自然停驻于页脚上方，避免重叠。
在 Web 布局中，position: fixed 元素脱离文档流，其 bottom 值始终相对于视口底部计算，因此无法自动感知页脚（如 <footer id="colophon">）的位置。若希望固定菜单「智能避让」页脚——即视觉上仍保持距离页面底边 22px，但实际不覆盖页脚内容——直接调整 bottom 值（如设为 bottom: 122px）虽可行，却缺乏可维护性：一旦页脚高度变化，样式需同步修改。
更稳健的方案是利用 margin-bottom 配合已知页脚高度。由于 fixed 元素的 margin 依然生效（影响其自身盒模型边界），在 #social 上设置 margin-bottom: Xpx，相当于为其“预留出 Xpx 的不可穿透空间”，而该空间恰好与页脚高度一致时，视觉上菜单就会稳稳停在页脚正上方 22px 处。
✅ 正确实现方式如下：
/* 确保页脚有明确高度（推荐使用固定值或 min-height） */
footer#colophon {
height: 80px; /* 示例：实际项目中请替换为真实高度 */
/* 或使用 min-height: 80px; 更具弹性 */
}
/* 社交菜单：保持原有定位逻辑，仅追加 margin-bottom */
#social {
transform: rotate(-90deg);
transform-origin: left top; /* ✅ 优化建议：显式声明 origin，避免浏览器默认差异 */
position: fixed;
left: 50px;
bottom: 22px;
margin-bottom: 80px; /* ⚠️ 必须与 footer 高度严格一致 */
/* 可选：提升层级，避免被其他 fixed 元素遮挡 */
z-index: 1000;
}? 关键注意事项：
- margin-bottom 对 fixed 元素有效，但它不会改变元素的定位参考点，而是扩展其渲染边界，从而间接实现「停止」效果；
- 页脚高度必须可预测（建议用固定 height 或 min-height，避免依赖内容撑开导致高度波动）；
- 若页脚高度动态变化（如响应式多行文本），需配合 JavaScript 动态同步 margin-bottom，但多数场景静态高度已足够；
- transform-origin 建议显式写为 left top 或 left center，避免不同浏览器对 left 单值解析的细微差异（尤其旋转后定位偏移）。
? 总结：这不是“让 fixed 元素感知文档流”，而是通过 margin-bottom + 明确页脚高度 这一轻量级约定，以最小侵入性达成视觉避让目标——简洁、可靠、无需 JS、兼容所有现代浏览器。
