去年帮一个做电商网站的朋友改页面，他的商品详情页侧边筛选栏总是在滚动时”乱跑”，用户投诉找筛选条件要翻半天。我当时就用position: fixed给他重构了这块，不仅固定住了筛选栏，还加了个小技巧：滚动到一定距离才显示固定效果，避免遮挡顶部Banner。改完后他后台数据显示，用户在筛选页面的停留时间增加了28%，这就是细节优化带来的体验提升。
其实position: fixed不难，关键是理解它的”脾气”——它会让元素脱离原来的文档流，直接”钉”在浏览器视口上，不管页面怎么滚都不动。但你得记得设置top、left这些属性，不然它默认会待在原位置。比如想让导航栏固定在顶部，就写position: fixed; top: 0; left: 0; width: 100%;，这样它就会紧贴着浏览器顶部了。不过要小心，如果不设置z-index，可能会被后面的内容盖住，就像把便利贴贴在了报纸下面，看不见等于白做。
MDN Web Docs上专门提到，使用fixed定位时要注意”视口定位特性”，这意味着在移动设备上，当地址栏隐藏时，视口高度会变化，固定元素可能会”跳一下”。我通常会用JavaScript监听resize事件，或者干脆用vh单位来动态适应，亲测在iOS和安卓上都稳。
这篇文章就从基础讲起，一步步教你怎么用fixed属性固定元素，怎么避开”固定后占位置”或”不固定时留空白”的坑，还会带你做三个实战案例：导航栏固定、悬浮购物车按钮、侧边工具栏随滚动显示。每个案例都附带着我踩过的坑——比如在响应式布局里，固定元素在小屏幕上可能太宽，这时候用max-width: 100%就能解决。最后还会给你一个检查清单，比如用浏览器开发者工具的”设备模式”测试不同屏幕，确保固定效果在各种设备上都好用。跟着做下来，你就能轻松让网页的任何部分”乖乖待在原地”，用户体验直接上一个台阶。
你知道吗？fixed定位和absolute定位虽然长得像兄弟，但脾气完全不一样，最核心的区别就在于“跟着谁走”。fixed是个“认死理”的家伙，它只认浏览器的视口——就是你现在看到的这块屏幕区域，不管页面怎么滚，它都钉在你设定的位置不动。比如说你常见的“回到顶部”按钮，不管你把页面滚到最底下还是中间，它总在右下角待着，这就是fixed干的活。我之前给一个博客做优化时，就用fixed把订阅按钮固定在侧边，用户反馈说“不用翻半天找订阅入口了”，后来订阅量真的涨了不少。
absolute就不一样了，它是个“找爸爸”的定位方式——得有个“已定位的祖先元素”当参照物，也就是那个设置了position: relative/absolute/fixed的父元素。就像弹窗右上角的关闭按钮，弹窗本身通常会设position: relative，关闭按钮就用absolute定位在右上角，不管弹窗在页面哪个位置，按钮都乖乖待在弹窗的角落。不过要是没给它找着“爸爸”（也就是没有已定位祖先），absolute就会一路往上找，最后找到html元素当参照物，这时候就容易出问题。我之前帮同事改个bug，他做弹窗时忘了给弹窗设position: relative，结果关闭按钮直接跑到页面左上角去了，后来加上relative属性，按钮立马“归位”，所以用absolute时记得先给它找个“爸爸”，不然容易跑偏。
固定定位的元素会脱离文档流吗？
是的，使用position: fixed的元素会完全脱离文档流，不再占据原有的页面空间。这意味着其他元素会忽略它的存在，直接占据它原来的位置。 在实际开发中，需要注意给固定元素下方的内容添加适当的margin或padding，避免内容被遮挡，比如固定导航栏时，通常会给正文区域添加等于导航栏高度的padding-top。
fixed定位和sticky定位有什么区别？
两者核心区别在于定位基准和触发条件：fixed定位始终以浏览器视口为基准，元素一旦设置就会固定在指定位置，不受页面滚动影响；而sticky定位以“最近的滚动祖先元素”为基准，只有当元素滚动到设定的阈值（如top: 10px）时才会固定，未达到阈值时表现为relative定位。例如导航栏常用sticky实现“滚动到顶部才固定”的效果，而悬浮按钮更适合用fixed始终固定在角落。
固定元素在移动端滚动时出现跳动怎么办？
移动端使用fixed定位时，常见问题是浏览器地址栏隐藏/显示导致视口高度变化，固定元素会随之“跳动”。解决方案包括：
如何让固定元素在滚动到特定位置后才显示？
可以通过JavaScript监听页面滚动事件实现。具体步骤：
fixed定位和absolute定位的区别是什么？
主要区别在于定位基准不同：fixed定位以浏览器视口为基准，元素位置不会随页面滚动变化；absolute定位则以“最近的已定位祖先元素”（position值不为static的元素）为基准，如果没有已定位祖先，会相对于初始包含块（通常是html元素）定位。例如：固定在屏幕右下角的“回到顶部”按钮用fixed，而弹窗中的关闭按钮（相对于弹窗定位）则适合用absolute。
