17370845950

通过为固定定位的社交菜单添加与页脚高度相等的 `margin-bottom`，可使其在保持 `bottom: 22px` 视觉位置的同时，自然停驻于页脚上方，避免重叠。

当使用 position: fixed 将元素（如旋转的侧边社交菜单）固定在视口某处时，它会脱离文档流，不再受其他元素（包括页脚）影响——这正是导致菜单“压住”页脚的根本原因。单纯调整 bottom 值虽能临时规避，但缺乏响应性和可维护性；理想方案是让菜单在逻辑上“感知”页脚边界。

核心思路：利用 margin-bottom 挤出安全间距
虽然 fixed 元素不响应父容器 margin，但其自身的 margin-bottom 会在计算其占据的视觉空间时生效（尤其在与 bottom 协同作用时）。当 #social 设置 bottom: 22px 且 margin-bottom: Xpx，浏览器会将其底部边缘实际停在距视口底边 22px + Xpx 的位置——相当于向上偏移 Xpx。因此，只要 X 等于页脚高度，菜单底部就会恰好对齐页脚顶部上方 22px 处。

✅ 正确实现示例：

/* 确保页脚有明确高度（推荐使用固定高度或 min-height） */
footer#colophon {
  height: 80px; /* 示例值，请按实际页脚高度设置 */
  /* 或：min-height: 80px; */
}

/* 社交菜单：保持原有定位逻辑，仅增加 margin-bottom */
#social {
  transform: rotate(-90deg);
  position: fixed;
  transform-origin: left top; /* 建议补充 top，确保旋转锚点精准 */
  left: 50px;
  bottom: 22px;
  margin-bottom: 80px; /* 必须与页脚高度严格一致 */
}

⚠️ 注意事项：

• 高度一致性是关键：margin-bottom 值必须与页脚实际渲染高度完全相等。若页脚高度动态变化（如内容伸缩），需配合 JavaScript 动态更新该值，或改用 CSS calc() 配合 CSS 变量（需现代浏览器支持）；
• transform-origin 优化：原代码中 transform-origin: left 默认以 left center 为准，可能导致旋转后定位偏移。建议显式设为 left top 或 left bottom，并结合 top/bottom 微调；
• 无障碍与可访问性：固定定位菜单可能遮挡内容或干扰屏幕阅读器，建议添加 aria-label 和键盘焦点管理；
• 移动端适配：小屏幕下侧边栏易造成横向滚动，建议配合媒体查询隐藏或改为底部悬浮样式。

总结：该方案以最小侵入性解决固定元素与页脚的层叠冲突，无需 JS、不改变 DOM 结构，兼具简洁性与可靠性——前提是页脚高度可控且可预知。