position: fixed 使元素相对于视口定位，不随页面滚动移动，常用于导航栏、工具栏等需常驻的组件；通过 top、right、bottom、left 设置位置，脱离文档流，以视口为参考点；需注意 iOS Safari 滚动容器内可能失效、transform 祖先影响定位、移动端视口高度变化等问题；建议避免 transform 祖先、慎用 vh 单位、在移动端测试，必要时用 sticky 或 JS 替代。
当使用 position: fixed 时，元素会相对于浏览器视口定位，不随页面滚动而移动。这意味着无论页面如何上下滚动，该元素都会“固定”在屏幕的同一位置。
fixed 元素的基本行为
设置 position: fixed 后，元素脱离文档流，不再受父元素或滚动容器的影响。它始终以视口为参考点进行定位。
常见用途包括：顶部导航栏、侧边工具栏、返回顶部按钮等需要常驻可视区域的组件。如何正确控制 fixed 元素的位置
通过 top, right, bottom, left 属性设定 fixed 元素在视口中的具体位置。
- 固定在顶部：
top: 0; left: 0; - 固定在右侧：
right: 10px; top: 50%; - 居中固定：
left: 50%; transform: translateX(-50%);
常见问题与注意事项
虽然 fixed 元素默认不随滚动移动，但某些情况下可能表现异常：
Gridster.js多列网格式拖动布局插件
下载
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
立即学习“前端免费学习笔记（深入）”；
-
iOS Safari 中的滚动容器内 fixed 可能失效 —— 在
overflow: scroll的容器中，fixed 定位有时会相对于容器而不是视口。 -
使用 transform 的父元素会影响 fixed 行为 —— 如果祖先元素设置了
transform（如 scale、translate），fixed 元素会相对该祖先定位，而非视口。 - 键盘弹出或地址栏隐藏可能改变视口高度 —— 移动端需注意 vh 单位的动态变化。
确保 fixed 正常工作的建议
为了让 fixed 元素稳定保持位置，推荐以下做法：
- 避免将 fixed 元素放在有
transform的祖先内 - 使用
vh单位时谨慎，可考虑 JS 动态获取实际视口高度 - 在移动端测试真实滚动表现，必要时改用
position: sticky或 JS 模拟固定效果
基本上就这些。只要理解 fixed 是相对于视口、且不受滚动影响的机制，再避开常见陷阱，就能让元素稳稳停留在你想让它出现的位置。
