关于position:relative和position:absolute的区别

1.相同点：都属于定位方式，可以设置定位属性top/bottom/left/right
2.不同点：
（1）relative:（相对定位）：相对于自身原来所在位置进行定位，如果不对top/bottom/left/right进行设置（默认为left:0, top: 0），那么该元素将保持在原定位置，如果对上述4个参数进行设置，那么该元素将相对自身原来位置进行移动，但是它的移动并不会对其他的元素造成影响，能影响其他元素只是它原来所在的位置。这也是relative对比与absolute的一个特性，称之为“不完全脱离文档流”
（2）absolute（绝对定位）：与relative不同的是,absolute是相对于包含它自身的长辈级的对位过的元素进行定位（长辈级表示不一定是父级，也可能是父级的父级……），如果在长辈级找不到定位元素①那么就视为相对body定位，这里称为参考物。同样对该元素设置top/bottom/left/right会使其相对它的参考物进行移动。设置完absolute之后元素脱离文档流将不对任何没有脱离文档流的元素产生影响②即不在文档中占据任何位置(但是会遮挡住置于它之下的元素)，漂浮在网页Z轴方向上，也就是它唯一能影响的是脱离文档流的元素（包括设置了float，absolute的元素）存在一个层级关系z-index。在网页中有这样一种层级关系absolute>float>relative.
注意：如果需要设置元素为absolute的话，一般设置其父级相对定位relative，因为对父级设置relative的话，只要不设置top……等属性将对父级没有任何影响，不建议absolute相对absolute进行定位，在代码比较多大情况下不大好调控。

解释：
“定位元素①”：可以使relative、fixed、absolute的元素。
“影响②”指的是不影响其他元素所在位置，不挤压其他元素

3.扩展：position除了有relative、absolute、fixed等属性外，还有static属性
static:静态定位（与不设置任何position属性是一样的）
fixed:固定元素在某个位置，不随滚动条的滑动而移动