关于相对定位和绝对定位的区别

在我们进行编程的过程中时常会用到position:relative和position:absolute，分别是相对位置和绝对位置。许多的人不清楚其中的区别。让我们了解一下。

relative：
1、relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局
absolute：
1、在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位
2、父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位
（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）。
3、absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位。

下面我们来看个实例：

任务：几个不同颜色的盒子在一起

1、效果图：

2、html：

 

3、css：

 

简单的讲如果设置了相对位置，那么绝对位置会根据最近的相对位置进行定位（某种程度上来说相对位置就像锚点，而绝对位置就是锚，但是这个锚点不能脱离文档流就是不能脱离大海。）