css的定位解析

1.相对定位（ relative）

格式： position: relative;

相对自身原来位置进行偏移

偏移设置：top、left、right、bottom

通过指定偏移，到达新的位置后，定位的盒子还在原先的文档流里，对它的父级以及相邻的盒子都没有影响，它原来的位置也会保留下来

举个例子：

先设置三个div的盒子，这样会更直接感觉到区别，然后再给a1设置相对定位，但是注意第三没有把第二的位置给占掉，说明它原来的位置也会保留下来

2.绝对定位（absolute）

格式： position: absolute;

绝对定位要以它最近的一个“祖先元素”（爸爸 ，爷爷，祖爷爷.....）为基准进行偏移

如果它的爸爸，爷爷都没有的话，就会以浏览器为进行定位（只能靠自己了，哈哈哈）

还有更惨的，绝对定位位置发生偏移后，它原来的位置就会被别的元素给抢占

举个例子：

原先的样子：

 位移后的位置：

 3.固定定位（fixed）

格式：  position: fixed;

根据浏览器窗口来定位，不会随滚动条的移动而移动

就像：

 位移前两个盒子的位置

 

位移后（固定定位的盒子保持原位，而绝对定位的盒确上去了）：

☆ 还是那句话：根据浏览器窗口来定位，不会随滚动条的移动而移动☆