绝对定位和相对定位

绝对定位和相对定位

相对定位(relative)

特点：（务必记住）

相对于 自己原来在标准流中位置来移动的 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

影响：

设置后，原来的位置始终保留着

效果图

绝对定位(absolute)

1.完全脱标 —— 完全不占位置；

2.父元素没有定位，则以浏览器为准定位（Document 文档）。

效果图

3. 父元素要有定位

将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

效果图

特点：（务必记住）

绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准 移动位置 不保留原来的位置，完全是脱标的。

影响

设置后，原来的位置会被后面的内容占据

两者区别

1、相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。

2、绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。

3、绝对定位的元素以最近的定位祖先元素为参照物。
第一，不管是什么，既然要定位，就需要有一个参照物
相对定位的参照物是本身。
绝对定位的参照物就是父级元素，当父级元素中不存在相对定位，那么它的参照物就是body