CSS中的position属性用于控制元素在页面中的定位方式，不同的取值对应不同的定位规则，理解这些取值的差异是做好页面布局的基础。position属性共有五个常用取值，分别是static、relative、absolute、fixed和sticky，下面逐一讲解每个取值的特性、使用方法和实际场景。
1. static 静态定位
static是position属性的默认值，当元素没有显式设置position属性时，默认就是static定位。这种定位方式下，元素会按照正常的文档流排列，设置的top、right、bottom、left偏移属性不会生效，z-index属性也不会生效。
以下代码展示了static定位的特性：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.static-box {
position: static;
top: 20px; /* 该偏移不会生效 */
left: 20px;
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.normal-box {
width: 200px;
height: 100px;
background-color: #e8f4ff;
border: 1px solid #91caff;
}
</style>
</head>
<body>
<div class="static-box">static定位元素</div>
<div class="normal-box">普通文档流元素</div>
</body>
</html>
上述代码中，static-box元素设置了top和left偏移，但页面渲染时不会生效，元素会紧跟在文档流中正常排列，和普通未设置position的元素表现一致。
2. relative 相对定位
relative定位的元素首先会按照正常文档流排列，然后可以根据top、right、bottom、left属性相对于自身原来的位置进行偏移。偏移后，元素原本在文档流中占用的空间仍然保留，不会影响其他元素的布局位置。
来看一段relative定位的示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 400px;
padding: 20px;
border: 1px solid #ddd;
}
.relative-box {
position: relative;
top: 20px;
left: 30px;
width: 200px;
height: 100px;
background-color: #fff7e6;
border: 1px solid #ffd591;
}
.other-box {
width: 200px;
height: 100px;
background-color: #f6ffed;
border: 1px solid #b7eb8f;
}
</style>
</head>
<body>
<div class="container">
<div class="relative-box">relative定位元素</div>
<div class="other-box">相邻元素</div>
</div>
</body>
</html>
示例中relative-box元素向下偏移20px，向右偏移30px，但是原本占据的文档流空间还在，所以other-box元素不会向上移动，仍然在relative-box原本的位置下方排列。relative定位常用于需要微调元素位置，或者作为absolute定位元素的参考父元素。
3. absolute 绝对定位
absolute定位的元素会脱离正常文档流，不再占据原来的空间，其他元素会忽略它的存在进行布局。它的偏移位置是相对于最近的已定位（position取值不是static）的祖先元素，如果不存在这样的祖先元素，则相对于初始包含块（通常是html元素或者浏览器视口）进行偏移。
以下是absolute定位的典型示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
position: relative; /* 作为absolute子元素的参考父元素 */
width: 400px;
height: 300px;
padding: 20px;
border: 1px solid #ddd;
margin: 50px;
}
.absolute-box {
position: absolute;
top: 20px;
right: 20px;
width: 150px;
height: 80px;
background-color: #fff1f0;
border: 1px solid #ffa39e;
}
.sibling-box {
width: 200px;
height: 100px;
background-color: #e6f7ff;
border: 1px solid #91d5ff;
}
</style>
</head>
<body>
<div class="parent">
<div class="absolute-box">absolute定位元素</div>
<div class="sibling-box">相邻元素</div>
</div>
</body>
</html>
代码中parent元素设置了position: relative，所以absolute-box会相对于parent元素的内边距区域进行偏移，定位到parent元素的右上角。而sibling-box元素会忽略absolute-box的存在，正常排列在parent元素的内容区域中。absolute定位常用于实现弹窗、下拉菜单、图标角标等需要脱离文档流的组件。
4. fixed 固定定位
fixed定位的元素同样会脱离文档流，它的偏移位置是相对于浏览器视口进行的，即使页面滚动，元素的位置也不会发生变化。fixed定位的元素不会寻找已定位的祖先元素，始终以视口为参考。
来看fixed定位的代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.fixed-box {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background-color: #722ed1;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.content {
height: 2000px;
padding: 20px;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="fixed-box">回到顶部</div>
<div class="content">
这里是大量页面内容，用于产生滚动条。当页面滚动时，右下角的固定定位元素会始终停留在视口的右下角位置，不会随着页面滚动而移动。
</div>
</body>
</html>
示例中fixed-box元素定位在视口右下角，无论页面如何滚动，它都会保持在右下角的位置。fixed定位常用于实现固定导航栏、悬浮客服按钮、回到顶部按钮等不需要随页面滚动而移动的组件。
5. sticky 粘性定位
sticky定位是相对定位和固定定位的结合，元素在跨越特定阈值前表现为相对定位，跨越阈值后表现为固定定位。它的偏移位置是相对于最近的滚动祖先元素（或者是视口）进行的，需要配合top、right、bottom、left其中一个属性使用，用来定义阈值。
以下是sticky定位的示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.sticky-nav {
position: sticky;
top: 0; /* 当元素距离视口顶部为0时，切换为固定定位 */
width: 100%;
height: 50px;
background-color: #1890ff;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
}
.section {
height: 500px;
padding: 20px;
border-bottom: 1px solid #eee;
}
</style>
</head>
<body>
<div class="section">第一部分内容</div>
<div class="sticky-nav">粘性导航栏</div>
<div class="section">第二部分内容</div>
<div class="section">第三部分内容</div>
</body>
</html>
示例中sticky-nav元素初始是相对定位，当页面滚动到该元素距离视口顶部为0时，就会变为固定定位，始终停留在视口顶部，直到其父元素滚动出视口范围。sticky定位常用于实现滚动时吸顶的导航栏、表格表头吸顶等场景。
不同position取值的对比
为了更清晰地区分五种定位方式的差异，整理如下对比表格：
| position取值 | 是否脱离文档流 | 偏移参考对象 | 典型使用场景 |
|---|---|---|---|
| static | 否 | 无（偏移属性不生效） | 默认布局，不需要特殊定位的元素 |
| relative | 否（保留原空间） | 自身原位置 | 元素位置微调、作为absolute定位的参考父元素 |
| absolute | 是 | 最近的已定位祖先元素/初始包含块 | 弹窗、下拉菜单、角标等脱离文档流的组件 |
| fixed | 是 | 浏览器视口 | 固定导航栏、悬浮按钮、回到顶部按钮 |
| sticky | 阈值前否，阈值后是 | 滚动祖先元素/视口 | 吸顶导航、吸顶表头 |
使用注意事项
- 使用absolute定位时，如果要相对于某个父元素偏移，需要给该父元素设置非static的position值，否则会一直向上查找直到初始包含块。
- fixed定位在移动端可能存在兼容性问题，部分旧版本浏览器不支持，使用时需要做兼容处理。
- sticky定位需要父元素有足够的滚动空间，如果父元素没有滚动区域，sticky定位会失效，表现为普通相对定位。
- 定位元素可以通过z-index属性控制堆叠顺序，z-index值越大，元素越靠上，但是只有定位元素（position取值不是static）的z-index才会生效。