CSS中的相对定位、绝对定位、固定定位、粘性定位的使用及原理以及定位的层级

1.相对定位:相对定位是相对元素自身，相对元素原先的位置进行改变，不脱离文档流，位置虽然改变了，但是原先的位置依然占用着

开启相对定位代码：position: relative; 可以设置top、bottom、left、right四个方向值

下面写个案例：

我们现在给第二个盒子开启相对定位

可以看到第二个盒子相对于原先的位置往右走了240px，为什么第三个盒子没有顶上去的，因为第二个盒子之前的位置也一直被占用着，虽然移动了位置，但是原先的位置一直被占用。

再看：

又加了一个right：240px，按理说是不是应该原地不动，但实际效果图：

导致这样的原因：left和right不能同时出现，如果同时出现，只采用left，同理top和bottom同时出现，采用top

使用场景：大多数都是配合绝对定位使用

2.绝对定位

子绝父相:就是给父亲设置相对定位，那么绝对定位参考位置就是父亲，否则绝对定位的元素会一直往上找，找到离自己最近的定位元素，如果一直找到html到没找到的话，就用html作为参考位置，用专业术语说，html就成为了开启绝对定位的包含块。

设置绝对定位时注意的几点：

1.开启绝对定位就是脱离了文档流，影响别的元素，跟相对定位相反

2.绝对定位不要跟浮动或者margin一起使用，否则浮动不起效果，margin会加大你的计算

3.定位辅助浮动使用，不建议都用定位来布局页面，因为有的浏览器会出问题

总结：

3.固定定位

4.粘性定位

5.定位的层级