CSS定位是前端布局中非常重要的核心技能，通过position属性可以控制元素在页面中的摆放位置，不同的定位取值对应完全不同的布局逻辑，理解这些差异是做好复杂页面布局的基础。
position属性的五种取值
CSS的position属性共有五个可选值，分别是static、relative、absolute、fixed、sticky，默认值为static，不同取值的定位规则差异很大。
1. static 静态定位
这是元素的默认定位方式，元素会按照正常的文档流排列，设置top、bottom、left、right等偏移属性不会生效，也不会脱离文档流。
/* 静态定位是默认值，无需手动设置也可以 */
.static-box {
position: static;
/* 以下偏移属性不会生效 */
top: 20px;
left: 30px;
}
2. relative 相对定位
相对定位的元素会先按照正常文档流排列，然后以自身原来的位置为参考基准，通过偏移属性调整位置，元素原本在文档流中占用的空间会保留，不会脱离文档流。
.relative-box {
position: relative;
/* 相对于自身原位置向右偏移20px，向下偏移10px */
top: 10px;
left: 20px;
width: 100px;
height: 100px;
background: #f00;
}
3. absolute 绝对定位
绝对定位的元素会脱离正常文档流，其参考基准是最近的开启了定位（position取值不为static）的祖先元素，如果所有祖先都没有开启定位，则以初始包含块（通常是html元素）为参考基准。偏移属性会相对于参考基准的边缘计算位置。
/* 父元素开启相对定位，作为子元素的参考基准 */
.parent {
position: relative;
width: 300px;
height: 300px;
background: #eee;
}
.child {
position: absolute;
/* 相对于父元素顶部10px，右侧10px */
top: 10px;
right: 10px;
width: 50px;
height: 50px;
background: #0f0;
}
4. fixed 固定定位
固定定位的元素也会脱离文档流，参考基准是浏览器的视口（viewport），无论页面如何滚动，元素的位置都会固定在视口的指定位置，常用于顶部导航栏、侧边悬浮按钮等场景。
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #333;
color: #fff;
}
5. sticky 粘性定位
粘性定位是相对定位和固定定位的结合，元素在跨越特定阈值前表现为相对定位，之后表现为固定定位，常用于表格表头、列表分类标题等需要滚动时固定的场景。
.sticky-header {
position: sticky;
top: 0;
background: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
}
定位相关核心属性
除了position属性，还有几个属性和定位配合使用非常重要：
- top/bottom/left/right：偏移属性，用于设置元素相对于参考基准的边缘距离，只有定位元素（position取值不为static）设置这些属性才会生效。
- z-index：堆叠顺序属性，用于控制定位元素在Z轴（垂直于屏幕的方向）的显示顺序，数值越大元素越靠上，默认值为auto，只有定位元素设置该属性才会生效。
- clip：裁剪属性，用于裁剪绝对定位元素的显示区域，现在更推荐使用clip-path属性替代。
定位常见应用场景
| 定位类型 | 典型应用场景 |
|---|---|
| relative | 微调元素位置、作为absolute定位元素的参考容器 |
| absolute | 弹窗、下拉菜单、图标角标、元素叠加布局 |
| fixed | 顶部导航栏、侧边悬浮客服按钮、返回顶部按钮 |
| sticky | 滚动时固定的表头、分类标题、吸顶导航 |
定位使用注意事项
- 使用absolute定位时，父元素如果没有开启定位，会导致元素参考基准不符合预期，需要提前确认祖先元素的定位状态。
- z-index只对定位元素生效，且数值没有单位，不需要加px等后缀。
- fixed定位在移动端部分浏览器中存在兼容问题，需要测试不同设备的表现。
- sticky定位的生效条件比较特殊，父元素不能有overflow:hidden或者overflow:auto属性，否则粘性效果会失效。
完整布局示例
下面是一个使用多种定位实现的卡片布局示例，包含相对定位容器、绝对定位角标、固定定位悬浮按钮：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位示例</title>
<style>
.card-container {
position: relative;
width: 200px;
height: 300px;
border: 1px solid #ddd;
margin: 50px auto;
}
.card-badge {
position: absolute;
top: -10px;
right: -10px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #f00;
color: #fff;
text-align: center;
line-height: 40px;
font-size: 12px;
}
.back-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: #333;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="card-container">
<div class="card-badge">热销</div>
<p>这是一张商品卡片</p>
</div>
<div class="back-top">顶部</div>
</body>
</html>
运行上面的代码可以看到，角标会相对于卡片容器定位在右上角，返回顶部按钮会固定在浏览器视口的右下角，滚动页面时按钮位置不会变化，这就是不同定位方式的直观效果。
CSS定位position属性relative定位absolute定位fixed定位修改时间：2026-07-14 00:57:31