使用 position: fixed 可让元素相对于视口固定，常用于导航栏、返回顶部按钮等；通过 top、bottom、left、right 定位，需注意脱离文档流、层级覆盖及移动端兼容性问题。
使用 position: fixed 可以让元素相对于浏览器视口固定定位，不随页面滚动而移动。这是实现导航栏、返回顶部按钮、悬浮广告等常见固定元素的核心方法。
基本语法与作用
将 CSS 的 position 属性设置为 fixed，元素就会脱离文档流，并相对于浏览器窗口进行定位。
示例：.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px;
}
这个导航栏会始终停留在页面顶部，即使用户向下滚动，它也不会消失。
常用定位场景与技巧
根据实际需求，可以通过不同方位属性控制固定元素的位置。
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
立即学习“前端免费学习笔记（深入）”；
- 顶部通栏：设置 top: 0，常用于头部导航
- 侧边悬浮按钮：使用 right: 20px; bottom: 20px; 实现右下角“返回顶部”按钮
- 全屏遮罩：配合 top: 0; left: 0; width: 100%; height: 100% 创建模态框背景
注意事项与常见问题
fixed 定位虽然方便，但也有需要注意的地方。
- 元素脱离正常文档流，可能覆盖其他内容，建议通过 z-index 控制层级
- 在移动端，某些浏览器对 fixed 支持存在兼容问题（如老版本 iOS Safari），可考虑用 position: sticky 替代部分场景
- 如果父元素有 transform 属性，可能会导致 fixed 失效，因为它会创建新的定位上下文
