侧边固定联系栏用position: fixed实现易被父级transform截断、ios safari跳动、遮挡内容或响应式失效，根本原因是祖先元素的transform/perspective/will-change创建了新定位上下文，应检查computed styles并改用sticky或调整留白与适配逻辑。
侧边固定联系栏用 position: fixed 实现最直接，但“固定在右侧”不等于“写个 right: 20px 就完事”——它极易被父级 transform 截断、在 iOS Safari 中跳动、遮挡内容或响应式失效。
为什么 position: fixed 右侧联系栏突然不贴右边缘了？
常见现象：开发时看着好好的，上线后在某些页面上 contact sidebar 偏左、悬浮位置错乱，甚至随滚动“跟着动”。根本原因不是 CSS 写错了，而是它被某个祖先元素的 transform、perspective 或 will-change 拉进了新的定位上下文。
- 用浏览器开发者工具检查该联系栏所有父级元素的
computed styles，重点看是否有transform: translateZ(0)、will-change: transform等值非auto的属性 - 临时移除疑似干扰的 class（比如
animated、scroll-container）或内联样式，确认是否恢复 - 若必须保留动画/滚动优化效果，改用
position: sticky+right: 20px，但需确保其父容器有明确高度且overflow: visible（否则 sticky 失效）
right 值设多少才不遮主内容又适配移动端？
固定侧边栏脱离文档流，主内容不会自动避让。靠 margin-right 不行（主内容通常在左侧），必须靠 padding-right 或整体容器留白——但更稳妥的是用 margin-left 给 body 或 main 区域“撑开”，同时配合 media query 同步缩放。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 联系栏宽度设为
width: 80px（图标区）+padding: 16px（触发 hover 展开），则基础right推荐设20px，留出安全间距 - 主内容区域（如
<main></main>）加margin-right: 100px（≥ 联系栏最大展开宽度），避免文字被 hover 后的内容遮盖 - 在
@media (max-width: 768px)下，把right改为-100%+transition: right 0.3s，再用 JS 控制 class 切换实现收起；同时重置main的margin-right为0
iOS Safari 滚动时联系栏“跳一下”怎么办？
这是 Safari 视口（viewport）在地址栏收起/展开时动态变化导致的渲染重排，position: fixed 元素会短暂错位。不建议 hack viewport meta，更稳定的做法是监听 resize 并微调位置。
- 给联系栏加
top: env(safe-area-inset-top)（适配刘海屏），并用calc(50vh - 50px)替代绝对top: 200px，减少对视口高度硬依赖 - 监听
window.addEventListener('resize', () => { sidebar.style.transform = 'translateZ(0)'; })，强制触发 GPU 层重绘（注意防抖） - 若项目已用
body { overscroll-behavior: contain; }，需确认它没意外禁用 scroll event，否则 resize 监听可能失效
真正卡住侧边联系栏的，从来不是 right 值本身，而是它所处的定位上下文、主内容的留白逻辑，以及 iOS 对 fixed 元素视口计算的微妙差异——这些地方不动手试一遍，光抄代码永远差那 5px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
