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

相对定位

每一个元素都可以看作一个盒子，文档流就是由这些盒子堆砌而成，而每个盒子都在这个文档流中占据了一个位置，如果我们把这个盒子设置成相对定位，那么就可以拿起这个盒子相对于它原来所占据的位置向别的地方移动，如设置 left:50px 就是相对于盒子原来位置向右移动了 50 个像素，我们例子来说明。

我们把 box-2 设置成相对定位并向左移动 60 像素，向下移动 120 像素。

 .box-2{
        background-color: #00A5FF;
        position: relative;
        left: 60px;
        top:120px;
    }

则变为下面的情况

从上图我们可以发现 box-2 相对于它原来的位置向下且向右移动了，并且原来的位置留下了一片空白，但是其他的元素并没有占据它，说明元素设置相对定位后，可以相对于其在普通流中的位置偏移，原本所占的空间仍保留。

同时我们从图上可以看出，box-2 移动之后覆盖了其他的元素，这说明当元素被设置相对定位后，将激活 z-index 属性，其层叠级别高于原本的文档流。此时如果给 box-5 也设置 position: relative，那么 box-5 又会覆盖 box-2。

绝对定位

绝对定位的参照物是相对于该元素最近的已定位的祖先元素，如果没有一个祖先元素设置定位，那么参照物是 body。

绝对定位与相对定位的一大不同之处就是，当我们把一个元素设置成绝对定位，那么这个元素将会脱离文档流，漂浮在文档流上方，并且后面的元素将会填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置，而参照物则需要根据它祖先元素的定位设置来确定。我们就用实例说明绝对定位的特点和需要注意的地方。
例如

祖先元素都没有设置定位，元素相对于 body 转移位置。
给 box-2 设置成 position: absolute;

 .box-2{
     background-color: #00A5FF;
     position: absolute;
 }    

则出现下面的结果

我们可以看到最后一个 box 存在的位置空了出来，这是因为 box-2 脱离文档流漂浮到文档上方，并且后面的元素填补了上去，说明元素设置绝对定位后脱离文档流，后面的元素将填补它的位置。

接着你可能就会发现 box-3 失踪了，其实它没有失踪，它是在 box-2 下面，就像相对定位一样，当元素被设置绝对定位后，将激活 z-index 属性，其层叠级别高于原本的文档流。

你可能会问了，不是说祖先元素都没有定位时，元素会相对于 body 来改变自己的位置吗，为什么它还是飘在原来的位置，而没有飘到 body 顶头呢，那么请看，我把 left 和 top 属性加上会出现什么样的结果。

如果加上left和top属性

.box-2{
         background-color: #00A5FF;
         position: absolute;
         left: 0;
         top:0;
     }   

现在可以看到它与 body 顶头了，因为光设置一个元素的相对定位它只会漂浮到原来位置的上空，并不会漂浮到参照物的文档流最前方，而只有设置了 left、top、right、bottom 这些参数的时候才能激活它相对于参照物移动的效果。

祖先元素 grandpa 设置定位，元素相对于 grandpa 转移位置

 .grandpa{
         background-color: #55a532;
         height: 500px;
         width: 600px;
         margin: 40px;
         position: relative;
     } 
     .box-2{
         background-color: #00A5FF;
         position: absolute;
         left: 20px;
         top:20px;
     }   
     

当祖先元素不止一个设置了定位的时候，选择最近的一个作为参照物。