position常见的4个属性值：static，relative，absolute，fixed
1.static: 默认位置
2.relative：如果设置了relative值，它偏移的top,right,bottom,left的值都是以它 原来的位置 为基准偏移，而不管其他元素会怎么样。注意relative移动后的元素在原来的位置 仍占据空间
relative示例图
3.absolute：可定位于相对于包含它的元素的指定坐标。意思就是如果他的父容器设置了position属性，并且position的属性值为absolute,并且position的属性值为absolute或relative，那么就会依据父容器进行偏移。
如果其父容器没有设置position属性，那么偏移是以body为依据。注意：设置absolute属性的元素在标准流中不占位置。
absolute（父容器未设置宽高）
4.fixed：可定位于相对于浏览器的指定坐标，无论窗口滚动与否，元素都会留在那个位置。它始终是以body为依据的。注意：设置fixed属性的元素在标准流中不占位置。
fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
height: 2000px;
}
div {
border: 1px solid black;
}
.father {
/*position: relative;*/
}
.test {
/*position: relative;*/
/*position: absolute;*/
position: fixed;
/*left: 200px;
top: 100px;*/
}
</style>
</head>
<body>
<div class="">
上面
</div>
<div class="father">
<div class="test">
中间
</div>
</div>
<div class="">
下面
</div>
</body>
</html>
总结：
| position | 相对于 | 是否在标准流中占据位置 |
|---|---|---|
| static | 默认 | 是 |
| relative | 原来的位置 | 是 |
| absolute | 父容器 | 否 |
| fixed | 浏览器 | 否 |
