css中的position是层叠样式表里用于控制元素定位方式的核心属性，它定义了元素在页面文档流中的定位规则，以及元素相对于什么参照物进行位置偏移，不同的取值会让元素呈现出完全不同的布局表现。
position属性的常见取值
position属性的常用取值有5种，分别是static、relative、absolute、fixed、sticky，默认取值为static，下面逐一介绍每个取值的作用。
1. static 静态定位
这是所有元素的默认定位方式，元素会按照正常的文档流规则排列，设置top、right、bottom、left这些偏移属性不会生效，z-index层叠属性也不会生效。
/* 静态定位是默认值，不需要显式设置也可以 */
.box {
position: static;
/* 下面的偏移设置不会生效 */
top: 20px;
left: 30px;
}
2. relative 相对定位
相对定位的元素会先按照正常文档流排列，然后相对于自己原来的位置进行偏移，偏移后原来的文档流位置仍然保留，不会被其他元素占据。
.relative-box {
position: relative;
/* 相对于自己原来的位置向右偏移20px，向下偏移10px */
top: 10px;
left: 20px;
width: 100px;
height: 100px;
background: #f0f0f0;
}
3. absolute 绝对定位
绝对定位的元素会脱离正常文档流，不再占据原来的位置，它的定位参照物是最近的一个非static定位的祖先元素，如果所有祖先都没有设置非static定位，那么参照物就是初始包含块（通常是html元素）。
/* 父元素设置相对定位，作为子元素绝对定位的参照 */
.parent {
position: relative;
width: 300px;
height: 300px;
background: #e8e8e8;
}
.child {
position: absolute;
/* 相对于父元素顶部偏移10px，右侧偏移10px */
top: 10px;
right: 10px;
width: 80px;
height: 80px;
background: #ff9900;
}
4. fixed 固定定位
固定定位的元素也会脱离文档流，它的定位参照物是浏览器的视口，也就是说元素会固定在浏览器窗口的某个位置，即使页面滚动也不会改变位置，常用于实现顶部导航栏、侧边悬浮按钮、回到顶部按钮等场景。
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
5. sticky 粘性定位
粘性定位是相对定位和固定定位的结合，元素在跨越特定阈值前表现为相对定位，之后表现为固定定位，常用于实现表格表头滚动固定、列表分类标题吸顶等效果，需要注意它的父元素不能设置overflow:hidden或者overflow:auto属性，否则会失效。
.sticky-title {
position: sticky;
/* 当元素距离视口顶部0px时，变为固定定位 */
top: 0;
background: #f5f5f5;
padding: 10px;
}
不同定位方式的对比
为了更清晰地区分各个定位方式的特点，下面通过表格做对比：
| 取值 | 是否脱离文档流 | 定位参照物 | 偏移属性是否生效 |
|---|---|---|---|
| static | 否 | 无 | 否 |
| relative | 否（原位置保留） | 元素自身原位置 | 是 |
| absolute | 是 | 最近非static定位祖先元素 | 是 |
| fixed | 是 | 浏览器视口 | 是 |
| sticky | 阈值前否，阈值后是 | 父元素+视口 | 是 |
使用position的注意事项
- 使用absolute定位时，一定要给父元素设置合适的非static定位，否则可能出现定位偏移不符合预期的问题。
- fixed定位在移动端部分浏览器可能存在兼容性问题，测试时需要覆盖不同机型。
- sticky定位的生效条件比较严格，父元素不能有overflow隐藏设置，且必须指定top、right、bottom、left中的至少一个阈值。
- 定位元素可以通过z-index属性控制层叠顺序，z-index值越大的元素会显示在越上层，默认情况下后写的元素会层叠在先写的元素上方。
简单示例演示
下面是一个综合使用relative和absolute定位实现居中效果的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>position定位示例</title>
<style>
.container {
position: relative;
width: 400px;
height: 300px;
background: #f0f0f0;
margin: 50px auto;
}
.center-box {
position: absolute;
/* 上下左右都设为0，再配合margin auto实现居中 */
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 100px;
background: #409eff;
}
</style>
</head>
<body>
<div class="container">
<div class="center-box"></div>
</div>
</body>
</html>
通过上述示例可以看到，父元素设置relative定位，子元素设置absolute定位后，通过偏移属性配合margin就能快速实现元素的水平和垂直居中，这也是position属性在实际开发中的常见用法。