使用 position: fixed 可让元素固定在视口，常用于导航栏、返回顶部按钮等；通过 top、right、bottom、left 定位，脱离文档流，需用 z-index 控制层级并注意遮挡问题；兼容性方面，部分移动端或父元素 transform 下可能失效，可配合 padding 留白，提升体验。
使用 CSS 的 position: fixed 可以让元素相对于浏览器视口固定位置，即使页面滚动，该元素也始终保持可见。这种定位方式常用于导航栏、返回顶部按钮、悬浮广告等需要持续显示的组件。
1. 基本语法与用法
将一个元素设置为 fixed 定位，只需设置其 position 属性为 fixed，并通过 top、right、bottom、left 来确定它在视口中的位置。
.fixed-element {
position: fixed;
top: 20px;
right: 20px;
}
这个元素会固定在距离视口上方 20px、右侧 20px 的位置，滚动页面时它不会移动。
2. 常见应用场景
顶部导航栏：很多网站的导航栏在滚动时仍保持可见。
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
z-index: 1000;
}
返回顶部按钮：固定在右下角的小按钮。
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
padding: 10px 15px;
background-color: #007bff;
color: white;
border-radius: 5px;
}
3. 注意事项与技巧
- fixed 元素脱离文档流，不占据原文档空间，可能覆盖其他内容，建议使用 z-index 控制层级。
- 为了兼容移动端，某些老版本 iOS Safari 对 fixed 支持不佳，可考虑使用 JavaScript 模拟或改用
position: sticky作为替代。 - 如果父元素有 transform、perspective 等属性，fixed 定位可能失效，因为它会变成相对于该父元素定位，而非视口。
4. 配合 margin 或 padding 防止遮挡
由于 fixed 元素会覆盖页面内容，可以在主体内容上添加 margin 或 padding 来避免被遮挡。
body {
padding-top: 60px; /* 为固定导航栏留出空间 */
}
基本上就这些。合理使用 fixed 能提升用户体验，但注意不要遮挡主要内容，保持界面清晰可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
