固定定位通过position: fixed使元素相对于视口固定，常用于导航栏、悬浮按钮等场景，需注意脱离文档流、层级控制及移动端兼容性问题。
固定定位（position: fixed）是CSS中一种常用的布局方式，适用于需要在浏览器视口中始终停留在某个位置的元素，比如导航栏、返回顶部按钮或悬浮广告。它脱离文档流，相对于浏览器窗口定位，不随页面滚动而移动。
1. 基本语法与使用方法
要使用固定定位，只需将元素的 position 属性设置为 fixed，然后通过 top、right、bottom、left 来指定具体位置。
.element {
position: fixed;
top: 20px;
right: 20px;
}
上面代码会让元素始终固定在距离视口顶部和右侧各20px的位置，即使页面滚动也不会改变。
2. 常见应用场景
固定定位适合以下几种典型场景：
立即学习“前端免费学习笔记（深入）”；
- 顶部导航栏：保持导航始终可见，方便用户随时切换页面。
- 侧边悬浮按钮：如“在线客服”或“反馈”按钮，固定在右下角。
- 回到顶部按钮：当页面下滑一定距离后显示，点击可快速返回顶部。
- 模态框或通知提醒：某些提示信息需要固定在屏幕中央或角落。
3. 注意事项与常见问题
虽然 fixed 定位很方便，但使用时需要注意以下几点：
- 脱离文档流：fixed 元素不会占据原文档空间，可能造成其他内容上移，需预留空白或调整布局。
- 层级问题：若被其他元素遮挡，可通过设置 z-index 提升层级。
- 移动端兼容性：部分老版本移动浏览器或iOS Safari在输入框弹出软键盘时可能出现 fixed 定位失效，可考虑用 position: sticky 或 JavaScript 模拟。
- 全屏覆盖需求：若要做全屏遮罩（如弹窗背景），需设置 width: 100vw; height: 100vh;，避免滚动条影响。
4. 实际示例：固定底部工具栏
下面是一个固定在页面底部的工具栏样式：
.toolbar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: white;
text-align: center;
line-height: 50px;
z-index: 1000;
}
这样无论页面如何滚动，工具栏都会贴在视口底部，适合用于移动端操作栏。
基本上就这些。掌握 fixed 定位的关键是理解它相对于视口而非父元素或文档来定位，合理使用能极大提升用户体验。不复杂但容易忽略细节。
