通过为固定定位的社交菜单添加与页脚高度相等的 `margin-bottom`，可使其视觉上“停驻”在页脚上方，既保持 `bottom: 22px` 的基准定位，又避免遮挡页脚内容。
在网页布局中，使用 position: fixed 实现侧边旋转导航（如垂直社交链接栏）非常常见，但其脱离文档流的特性会导致它无视页脚位置，直接覆盖在页面最底部——这不仅影响视觉层次，还可能阻碍用户与页脚交互。
你当前的 CSS 将 #social 固定在距视口底边 22px 处：
#social {
transform: rotate(-90deg);
position: fixed;
transform-origin: left;
left: 50px;
bottom: 22px;
}虽然 bottom: 22px 确保了菜单始终位于视口底部附近，但它无法感知 DOM 中真实存在的 <footer> 元素。因此，当用户滚动至页脚区域时，菜单会叠在页脚之上。
✅ 解决方案：利用 margin-bottom 模拟“避让”效果
由于 fixed 元素不响应父容器或兄弟元素的尺寸，我们不能用 top/bottom 动态计算，但可以借助一个关键技巧：给 #social 添加等于页脚高度的 margin-bottom。该 margin 不会改变其固定定位的参考点，但在渲染时会将其“视觉下边界”向上推升，从而自然留出页脚所需空间。
假设你的页脚高度为 100px（请根据实际样式调整），CSS 修改如下：
footer#colophon {
height: 100px; /* 显式声明高度，确保可预测性 */
/* 或使用 min-height + padding 组合，并据此统一 margin 值 */
}
#social {
transform: rotate(-90deg);
position: fixed;
transform-origin: left;
left: 50px;
bottom: 22px;
margin-bottom: 100px; /* 关键：与 footer 高度严格一致 */
}⚠️ 注意事项：
- margin-bottom 对 fixed 元素生效，是因为浏览器在计算其最终渲染框（paint box）时仍会考虑 margin（尽管不影响定位锚点）。这是被广泛支持且稳定的渲染行为。
- 页脚高度必须可测量且稳定：若页脚高度动态变化（如响应式内容、JS 插入），建议通过 JavaScript 动态同步 margin-bottom 值，或改用 position: sticky + 容器约束等更现代方案。
- 若页脚使用 min-height 或 flex 布局导致高度不固定，推荐先用 getBoundingClientRect().height 获取实际高度，再注入 CSS 变量或内联样式。
? 进阶提示（可选）：CSS 自定义属性增强可维护性
:root {
--footer-height: 100px;
}
footer#colophon {
height: var(--footer-height);
}
#social {
/* ...其他样式 */
margin-bottom: var(--footer-height);
}这样，只需修改一处变量，即可全局同步更新避让距离，大幅提升样式可维护性。
