绝对定位和相对定位

1.相对定位

通过相对定位来控制网页中元素的位置
语法：position：relative
参照点：自身原来的位置

1.1相对定位

position：relative

设置相对定位后 可以设置top bottom left right 对盒子进行位置上的调整 常用的top和left
注意 ：相对定位的位置调整是以盒子原来的位置的左上角的点为原点进行的

停薪留职：相对定位后移动的盒子，即使离开原有位置，其他盒子也不能占有其原有位置（特点）

默认情况下，给网页添加两个div，因为div是块元素，所以会上下排列：

然是定位就会有位置上的改变，这时我们添加top和left属性

发现两个div发生了重叠，紫色的div没动，但是黑色的div向下移动了20像素，同时向左移动了20像素，这样才导致了两个div的重叠。

添加一个大盒子，使用大盒子包住黑div，给大盒子设置了margin属性后，小盒子会随着大盒子移动，

我们给小盒子设置相对定位，观察其移动是以哪里为原点？
小盒子在定位前在哪里，就以哪里为原点即永远以自己的位置为原点

2.绝对定位

原则是参照距离最近的有定位的父元素
语法 position：absolute；
参照点 距离最近的有定位的父元素

找爹型

是定位的一种
absolute关键词

通过相对定位来控制网页中元素的位置
2.1绝对定位的使用

默认情况下，给网页添加两个div，因为div是块元素，所以会上下排列：
我们之前设置相对定位之后位置其实没有发生改变，因为没有设置top或者left等属性，那我们设置绝对定位呢？
position：absolute；
第一个盒子设置绝对定位后，第二个盒子消失

绝对定位的盒子，可以用属性top bottom left right 进行调整 常用的top left
注意：绝对定位的盒子，不会占据原有位置，后方盒子会顺势跟上，占用原有盒子位置
上面的例子我们会发现div块只剩一个，这样明显和相对定位有了区别，同样，我们让div块在位置上发生改变，这时我们添加top和left属性

并不是紫色盒子消失了而是黑色盒子设置绝对定位后，就不再占用原来位置了，紫色盒子就顺势上去了，占有原有位置

如果定位后的小盒子，大盒子没有进行任何定位，小盒子就会向上找到body盒子，body盒子作为移动的参照