版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hudie_1993/article/details/78200565
在CSS中，所谓绝对定位指的是“相对于”已经定位的祖先元素，如果不存在已经定位的祖先元素，那么就“相对于”最初的包含快(一般情况下为body);相对定位指的是相对于元素初始位置进行定位。
下面来讲述两者的区别：
(1)相对定位
相对定位比较简单，如果在某个元素中设置了position属性为relative,那么该元素会相对于初始位置进行定位，详情如下图所示：
相对定位不会脱离文档流(文档流表示针对窗体而言，自上而下分为多行，从而依左至右排放元素)，即当第二个盒子按照left:30px;top:40px;的设置相对移动之后，原来的位置其实是保持不变，第三个盒子不会占用第二个盒子的原始位置。
(2)绝对定位
绝对定位相对于上述情况，则相较于复杂一点。绝对定位需要找到设置绝对定位的元素的祖先元素，它会根据离其最近的祖先元素进行定位。详情见下图所示：
根据上图可以明显的看出，当第二个盒子设置为绝对定位之后，该盒子脱离文档流，并且它的原始位置已经被第三个盒子所替代。接着第二个盒子开始查找它的“参照物”，由于白色盒子的postion属性为默认值，于是向上层级查找，橘色盒子position:absolute,在绝对定位中，符合祖先元素的条件(定位设置为非static),因此第二个盒子会以橘色盒子为参照物进行向左和向下移动。