使用 position: fixed 可使元素固定在视窗特定位置，如顶部导航栏（top: 0）、右侧侧边栏（right: 0）、底部工具栏（bottom: 0）或悬浮按钮（bottom: 20px, right: 20px），元素脱离文档流且随视口定位，需注意层级控制（z-index）、覆盖问题及移动端兼容性，避免父元素 transform 导致失效。
要让元素在页面滚动时始终保持在视窗的某个位置，比如顶部、底部或角落，可以使用 CSS 的 position: fixed 实现固定定位。这种方式常用于导航栏、返回顶部按钮或悬浮广告等场景。
使用 position: fixed 基本语法
将元素的 position 属性设置为 fixed，并配合 top、right、bottom、left 等属性来确定其在视口中的位置。
示例：固定在页面顶部
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px 0;
z-index: 1000;
}
这个元素会始终停留在浏览器窗口的顶部，即使页面滚动也不会移动。
常见应用场景与技巧
根据实际需求，可以通过调整方位属性实现不同效果：
立即学习“前端免费学习笔记（深入）”；
-
固定侧边栏：设置
position: fixed; top: 0; right: 0;可让元素固定在右侧 -
底部工具栏：使用
bottom: 0;让元素贴在视窗底部 -
悬浮按钮：例如“回到顶部”按钮，可设为
position: fixed; bottom: 20px; right: 20px;
注意事项
使用 fixed 定位时需注意以下几点：
- 元素脱离文档流，可能覆盖其他内容，建议使用 z-index 控制层级
- 固定元素基于浏览器视口定位，不是父容器
- 在移动端要注意键盘弹出或地址栏隐藏对视口的影响
- 如果父元素有 transform 属性（如 translate），fixed 可能失效，会退化为 relative 行为
