哈喽哈喽，这里是小菜不拖延博主
青训营打卡day9~
过了好久，前段时间写网站，属实又被定位搞糊涂了，这个混那个，那个混这个，晕头转向的，如果你也忘了position，或许这篇保姆级的文章能帮你回忆起来！
static
就是默认的属性，静态定位的元素不受 top、bottom、left 和 right 属性的影响。position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
<!DOCTYPE html>
<html>
<head>
<style>
.two {
position: static;
left: 30px;
top:0px;
}
.one {
position: relative;
left: 30px;
top:0px;
}
</style>
</head>
<body>
<div class="one" style="height:100px; width:200px; background-color: pink;"></div>
<div class="two" style="height:100px; width:200px; background-color: red;"></div>
</body>
</html>
效果：
relative
元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
.one {
position: static;
left: 30px;
top:0px;
}
.two {
position: relative;
left: 30px;
top:0px;
}
效果：
如图，当我们设置了div的position为relative时，我们就可以同通过设置top等四边的属性来控制div的位置，注意，div设置这些属性的时候，是相对于正常流设置的,比如，此时我们的one是static，他是在正常的流布局，所以我们two的relative的top、left等属性的相对是要包括one的位置的，就像这里的top为0，two就是离one这个div是0，而不是window的最上方为0.
当两个relative！
.one {
position: relative;
left:0px;
top:80px;
}
.two {
position: relative;
left: 30px;
top:0px;
}
效果：
可以发现，one的位置不会受到two的影响，他的属性设置的离得多远他就相当于body离多远
但是，我们会发现一个问题，欸，two不是设置的top为0吗，为什么他的位置一看就是top相对于window不是0，
fixed
元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。 (滚动下面窗口，two的位置始终固定)
absolute
元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
注意：“被定位的”元素是其位置除 static 以外的任何元素。
例如当有主体时：
注意这里，由于one是two的父亲（因为根据文档说了，position有除默认属性之外的设置，那么absolute就会相对于这个设置了position的盒子固定位置），所以他这里是相对于one，但是，当我们设置one的position的位置为static会发现他的效果是不同的，也就是two由于找不到其他拥有position位置的盒子，所以他又开始相对于body：
例如当没有主体时，相对于body：
sticky
元素根据用户的滚动位置进行定位，
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
也就是说，比如我们设置了top为20px,当我们的整个视图框离这个元素为20px的时候，就会启用fixed，他会随时视图而移动，当距离没有达到的时候他就是正常的relative的属性。
注意！比如我们现在的整个body高度为50px，我们设置了top为20px，当我们慢慢向下滑动的时候，body下边框和视图的距离会越变越小，当两者的距离小于20px的时候，我们属性为sticky，top=20px的盒子，将不会再移动，会固定在body下边框！！！！！！！注意这一点很重要
也就是说，必须满足top=20px，小于或者大于都不可以 （你可以在下面尝试一下啊）
