固定定位使元素相对于视口固定，不随滚动移动。设置 position: fixed 并配合 top、right、bottom、left 定位，常用于导航栏、返回顶部按钮、悬浮图标等需常驻显示的组件。需注意元素脱离文档流可能覆盖内容，应合理使用 z-index；移动端部分浏览器存在兼容性问题；父元素若含 transform 等属性会改变定位参考系；避免在 fixed 元素中使用未明确祖先高度的百分比高度。掌握“相对于视口”这一核心即可有效应用。
固定定位（position: fixed）在CSS中会让元素相对于浏览器视口进行定位，而不是随着页面滚动而移动。这意味着，一旦设置了 position: fixed，该元素将“固定”在屏幕的某个位置，即使用户上下或左右滚动页面，它依然保持不动。
固定定位的基本用法
要让一个元素使用固定定位，只需设置其 position 属性为 fixed，并配合 top、right、bottom、left 来指定位置。
.fixed-element {
position: fixed;
top: 20px;
right: 20px;
}
上面的代码会让元素始终停留在距离视口顶部和右侧各20px的位置。
常见应用场景
固定定位常用于需要始终保持可见的UI组件：
立即学习“前端免费学习笔记（深入）”；
- 导航栏：如顶部导航或侧边栏，滚动时仍可见
- 返回顶部按钮：固定在右下角，方便随时点击
- 悬浮广告或客服图标：不随内容滚动而隐藏
-
模态框背景：配合
z-index实现居中且遮罩全屏
注意事项与常见问题
虽然 fixed 定位很实用，但使用时需注意以下几点：
- 元素脱离正常文档流，可能覆盖其他内容，建议使用
z-index控制层级 - 在移动端，某些浏览器对
fixed的支持存在兼容性问题（如老版本iOS Safari），可能导致轻微抖动或失效 - 如果父元素有
transform、perspective等属性，会改变固定定位的参考系，使其相对该父元素定位，而非视口 - 避免在
fixed元素内使用百分比高度，除非明确设置祖先高度，否则可能计算异常
基本上就这些。只要理解了“相对于视口”这个核心概念，position: fixed 就能稳定生效，适合做各种常驻界面元素。不复杂但容易忽略细节。
