CSS的fixed定位是position属性的可选值之一，它的核心作用是让元素相对于浏览器视口进行定位，当页面发生滚动时，该元素会始终保持在设定的位置，不会随页面内容一起滚动，非常适合实现滚动时保持可见的效果。
fixed定位的基本语法
要使用fixed定位，首先需要给目标元素设置position: fixed属性，之后再配合top、bottom、left、right四个偏移属性来指定元素在视口中的具体位置。
基本语法示例如下：
/* 固定顶部导航栏，距离视口顶部0px，左侧0px，宽度占满整个视口 */
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
fixed定位的常见应用场景
1. 顶部/底部固定导航
最常见的场景就是页面顶部的导航栏，当页面向下滚动时，导航栏始终停留在视口顶部，方便用户随时切换页面模块。对应的HTML和CSS代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fixed定位示例</title>
<style>
/* 重置默认margin，避免页面出现默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
display: flex;
align-items: center;
padding: 0 20px;
z-index: 100; /* 确保导航在内容上方 */
}
.nav-item {
margin-right: 20px;
cursor: pointer;
}
.page-content {
margin-top: 50px; /* 避免内容被固定导航遮挡 */
padding: 20px;
line-height: 1.6;
}
.content-block {
height: 800px; /* 模拟长内容，产生滚动条 */
margin-bottom: 20px;
background-color: #f5f5f5;
padding: 20px;
}
</style>
</head>
<body>
<div class="fixed-nav">
<div class="nav-item">首页</div>
<div class="nav-item">分类</div>
<div class="nav-item">关于我们</div>
</div>
<div class="page-content">
<div class="content-block">
这是第一块长内容，页面滚动时顶部导航会始终可见
</div>
<div class="content-block">
这是第二块长内容，继续向下滚动测试固定效果
</div>
</div>
</body>
</html>
2. 侧边悬浮按钮
比如回到顶部的按钮、客服咨询按钮，通常固定在视口的右下角，不随页面滚动移动。实现代码如下：
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
使用fixed定位的注意事项
- fixed定位的元素会脱离文档流，不会占据原来的文档空间，因此如果固定元素在页面顶部，需要给下方的内容设置对应的上边距，避免内容被固定元素遮挡。
- fixed定位是相对于浏览器视口定位，而不是相对于父元素，即使父元素设置了
position: relative，也不会影响fixed元素的定位基准。 - 在移动端，部分浏览器在滚动时会出现fixed定位元素抖动的问题，可以通过给父元素设置
transform属性或者调整滚动容器的样式来优化，不过需要注意transform属性会让fixed定位相对于该父元素生效，而不是视口。 - 可以通过
z-index属性控制fixed定位元素的层叠顺序，值越大的元素显示在越上层，避免被其他内容覆盖。
fixed定位和其他定位方式的区别
我们可以通过表格对比fixed定位和其他常见定位方式的差异：
| 定位方式 | 定位基准 | 是否脱离文档流 | 滚动时是否移动 |
|---|---|---|---|
| static | 默认文档流位置 | 否 | 是 |
| relative | 元素自身原来的位置 | 否 | 是 |
| absolute | 最近的非static定位的父元素 | 是 | 是（随父元素滚动） |
| fixed | 浏览器视口 | 是 | 否 |
掌握fixed定位的使用方法后，就可以轻松实现各种滚动时保持可见的元素效果，提升网页的用户体验。
CSSfixed定位元素固定滚动可见position属性修改时间：2026-06-19 23:00:34