css体系中，position不仅仅是一个属性，还是一个模块（简单了解）；
*** position:static; ***
// 默认值
概念：
- 自然流 / 常规流 是什么？ --- 最原始的元素的展示方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
.block {
position: static;
top: 10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid blue;
box-sizing: border-box;
}
.block:nth-child(1) {
border: 2px solid green;
margin-left: auto;
margin-right: auto;
/*margin: 30px;*/
}
.block:nth-child(2) {
/*position: static;*/
/*border-color: red;*/
/*margin: 20px;*/
border: 2px solid red;
}
</style>
</head>
<body>
<div class="block">
A
</div>
<div class="block">
B
</div>
<div class="block">
C
</div>
<div class="block">
D
</div>
</body>
</html>
*** position:relative; ***
// 某个元素设置了relative值，则其top等值的偏移是相对本身在自然流中的位置；（原本的地理位置还会保留）
*** position:absolute; ***
// 某个元素设置了absolute值，则其top等值的偏移是相对最近的父元素；（原本的地理位置不会保留）
【注意】：如果有个元素设置为relative，则其余absolute的元素都会相对其做偏移
*** position:fixed; ***
// 某个元素设置了 fixed值，同absolute一样，如果没有父元素设置为relative，则依照body元素，在用户的视野里相对固定不动
*** position:sticky; ***