通过为固定定位的社交菜单添加与页脚高度相等的 `margin-bottom`，可使其视觉上“停驻”在页脚上方，既保持 `bottom: 22px` 的基准定位，又避免遮挡页脚内容。
在网页布局中，使用 position: fixed 实现侧边旋转导航（如社交链接栏）非常常见，但其脱离文档流的特性会导致它无视页脚等底部元素，直接覆盖其上。你希望菜单始终距离视口底部 22px，同时又不侵入页脚区域——这不是靠调整 bottom 值能优雅解决的（因为 bottom 是相对于视口，而非页面内容），而应采用“预留空间 + 视觉对齐”的组合策略。
核心思路是：利用 margin-bottom 在固定元素自身底部“撑开”一段空白，使其渲染边界自然止步于页脚顶部。由于 fixed 元素的 margin 不影响其定位参考点，但会影响其内容盒（content box）的渲染范围，配合页脚的显式高度，即可实现视觉上的精准避让。
✅ 正确做法如下：
-
确保页脚具有明确高度（推荐使用固定高度或 min-height，便于计算）：
footer#colophon { height: 80px; /* 示例值，请按实际页脚高度设置 */ /* 或使用 min-height: 80px; 更具弹性 */ } -
为 #social 添加等量 margin-bottom（必须与页脚高度一致）：
#social { transform: rotate(-90deg); position: fixed; transform-origin: left top; /* 建议补充 top，确保旋转基点更可控 */ left: 50px; bottom: 22px; margin-bottom: 80px; /* 关键：等于 footer 高度 */ /* 可选：添加 pointer-events: auto; 确保点击有效 */ }
⚠️ 注意事项：
- transform-origin: left 默认基于中心点，建议显式写为 left top，避免旋转后位置偏移；
- 若页脚高度动态变化（如响应式、内容驱动），需配合 JavaScript 动态同步 margin-bottom，例如：
const footer = document.getElementById('colophon'); const social = document.getElementById('social'); social.style.marginBottom = `${footer.offsetHeight}px`; // 并在窗口 resize 或 DOM 变化时重新计算 - 此方案兼容所有现代浏览器，无需依赖 position: sticky 或复杂 JS 监听；
- 切勿使用 top + calc() 模拟（如 top: calc(100vh - 80px - 22px)），因视口高度 ≠ 页面总高度，滚动时会失效。
总结：margin-bottom 是解决“fixed 元素避让静态底部容器”最轻量、最可靠的方式——它不改变定位逻辑，仅通过视觉留白达成自然停驻，兼顾语义清晰性与维护性。
