前言：
CSS传统的布局模式：
<1>普通流（又称之为标准流）
<2>浮动 float
<3>定位 position
属性值略解：
属性值详解：
static（正常定位）：
解释：
static其意思是正常定位，是position的默认值，包含此属性值的元素遵循常规流，此时的top，right，bottom，left，z-index属性都会失效。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.c{
position: static;
background-color: pink;
}
</style>
</head>
<body>
<div class="c">div1</div>
<br>
<div class="c">div2</div>
<br>
<span class="c">span1</span> <span class="c">span2</span>
</body>
</html>relative（相对定位）：
解释：
relative意为相对定位，在不设置top，left，right，bottom等元素时与static并无区别，但设置后，会根据相对于自身再常规流中的位置进行定位。
【意思是说虽然是移动了，但其原有的位置任然存在、占有，只是移动了】
图解：
例如下图，我们利用relative将黑框向下移动到绿色部分处，那么移动后其所占据的空间任然是黑框的部分，但显示时显示的是绿色部分。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.c{
position: relative;
top: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="c">div1</div>
<br>
<br>
<br>
<div style="background-color: aqua;">div2</div>
</body>
</html>absolute（绝对定位）：
解释：
（1）absolute与relate之间的区别在于是否脱离了标准流，relate在移动时并没有脱离，而absolute却脱离了。【absolute不占据原有位置，而是转移后的位置】
（2）absolute与relate之间的区别在于脱离对向是谁，，relative的脱离对象是自身在标准流的位置，而absolute的脱离对象是其最近的定位祖先元素
图解：
例如下图，我们利用absolve将黑框向下移动到绿色部分处，那么移动后其所占据的空间、显示时显示的是绿色部分。
举例：
fixed（固定定位）：
解释：
fixed和absolute十分类似，，两者的不同点在于偏移对象和定位对象。
（1）偏移对象：fixed相对于窗口，而absolute是心昂对于定位祖先元素
（2）定位对象：fixed的定位祖先只能是窗口，而absolute可以是相对定位的元素
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
border: 1px solid black;
padding: 12px;
height: 1000px;
}
.c {
position: fixed;
width: 100px;
height: 100px;
background-color: #f00;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="c">div1</div>
<div style="background-color: aqua;">div2</div>
</body>
</html>sticky（粘性定位）：
解释：
sticky像是fixed和relative的结合体，如果不给其设置top，left，right，bottom具体值，则效果与static一致。当在top、right、bottom、left四个属性中至少设置一个具体值时，元素具备两种状态 【类似relative（相对定位状态）和类似fixed（固定定位状态）】
举例：
以top:10px为例 ：当元素相对于窗口顶部的距离大于10px时，元素处于类似relative，一旦元素相对于窗口顶部的距离小于或等于10px时，元素立马切换到fixed。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
border: 1px solid black;
padding: 32px;
margin: 32px;
height: 1000px;
}
div {
width: 100px;
height: 100px;
position: relative;
}
#div1 {
background-color: red;
}
#div2 {
background-color: black;
position: sticky;
top: 100px;
left: 100px;
padding: 0;
margin: 0;
}
#div3 {
background-color: gray;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>