CSS中的固定定位是position属性的可选值之一，设置该属性后，元素会相对于浏览器视口进行定位，不会随页面滚动而发生位置变化，这一特性让它在很多固定展示的场景中非常实用。
固定定位的基本语法
要使用固定定位，首先需要给目标元素设置position: fixed，之后再通过top、right、bottom、left四个属性来指定元素相对于视口的位置，这四个属性可以组合使用，也可以只设置其中几个。
下面是一个最简单的固定定位示例，实现一个始终在页面右上角的悬浮提示框：
/* 固定定位基础样式 */
.fixed-tip {
position: fixed; /* 开启固定定位 */
top: 20px; /* 距离视口顶部20px */
right: 20px; /* 距离视口右侧20px */
width: 120px;
height: 40px;
background-color: #409eff;
color: #fff;
text-align: center;
line-height: 40px;
border-radius: 4px;
}
固定定位的核心特性
- 脱离文档流：固定定位的元素会脱离正常的文档流，不会占据原来的文档空间，后面的元素会直接填补它原来的位置。
- 相对于视口定位：无论页面如何滚动，固定定位元素的位置始终相对于浏览器可视区域，不会随页面内容滚动而移动。
- 可设置偏移量：通过
top、right、bottom、left可以精确控制元素在视口中的位置，偏移量的参考点是视口的对应边缘。 - z-index层级可控：固定定位元素可以通过
z-index属性设置堆叠层级，避免被其他元素遮挡，默认层级高于普通文档流元素。
固定定位的常见使用场景
1. 顶部固定导航栏
很多网站的顶部导航栏会在页面滚动时始终保持在顶部，方便用户随时切换页面，这是固定定位最典型的应用场景。
/* 顶部固定导航栏样式 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%; /* 宽度占满整个视口 */
height: 60px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影区分内容 */
z-index: 999; /* 设置较高层级，避免被其他内容遮挡 */
}
2. 侧边悬浮工具按钮
回到顶部、客服入口这类侧边悬浮按钮，通常也会使用固定定位，让它们始终停留在页面的侧边位置，方便用户随时点击。
/* 回到顶部按钮样式 */
.back-top {
position: fixed;
bottom: 40px; /* 距离视口底部40px */
right: 30px; /* 距离视口右侧30px */
width: 50px;
height: 50px;
background-color: #333;
color: #fff;
border-radius: 50%; /* 圆形按钮 */
text-align: center;
line-height: 50px;
cursor: pointer;
z-index: 998;
}
3. 底部固定操作栏
在移动端页面中，底部的提交按钮、操作菜单经常会使用固定定位，避免用户滚动页面后需要滑回底部才能操作。
/* 移动端底部固定操作栏 */
.footer-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #fff;
border-top: 1px solid #eee;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 997;
}
固定定位的常见问题与解决方法
问题1：固定定位元素被父元素transform属性影响
如果固定定位元素的父元素设置了transform、perspective、filter这几个属性中的任意一个，固定定位的参考对象会从视口变成该父元素，导致定位不符合预期。
解决方法：尽量避免给固定定位元素的父元素设置上述属性，如果必须设置，可以调整DOM结构，把固定定位元素移到不受影响的层级中。
问题2：固定定位导致页面内容被遮挡
当顶部固定导航栏出现后，页面原本的顶部内容会被导航栏遮挡，因为固定定位元素脱离了文档流，不占据原来的空间。
解决方法：给页面的body或者内容容器设置一个和固定导航栏高度相同的padding-top，预留出导航栏的空间，避免内容被遮挡。
/* 解决导航栏遮挡内容的问题 */
body {
padding-top: 60px; /* 和导航栏高度一致 */
}
问题3：移动端固定定位的兼容性问题
部分旧版本移动端浏览器对固定定位的支持不够完善，可能会出现定位偏移、滚动时闪烁的问题。
解决方法：如果是针对旧版本移动端浏览器开发，可以考虑用绝对定位配合JS监听滚动事件模拟固定定位的效果，或者优先使用移动端专用的布局方案替代。
固定定位与绝对定位的区别
很多开发者容易混淆固定定位和绝对定位，两者的核心区别是定位参考对象不同：
| 对比项 | 固定定位（fixed） | 绝对定位（absolute） |
|---|---|---|
| 定位参考对象 | 浏览器视口 | 最近的非static定位的父元素，没有则参考html根元素 |
| 是否随页面滚动 | 不随页面滚动变化位置 | 随页面滚动，除非父元素设置了overflow隐藏等属性 |
| 典型使用场景 | 固定导航栏、悬浮按钮 | 弹窗、图标角标、组件内局部定位 |
在实际开发中，需要根据具体的需求选择合适的定位方式，固定定位更适合需要始终展示在视口固定位置的元素，而绝对定位更适合组件内部的局部定位场景。