CSS 相对定位和绝对定位

通常情况下，元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，
这个时候给这个元素设置的left,right,bottom,top偏移量以及z-index属性都是没有作用的。

relative 相对定位

如果说我对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。
有一点要注意， 在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。这里值得注意的一点是：偏移可不是边距，跟边距是不一样的。

举个栗子：

我们给所有 div 设置了float: left; ，给第二个div 设置了 position: relative; 属性，以及 left: 10px; top: 30px; 的偏移量，
我们发现第三个 div 并没有前移占据 第二个 div 的位置，那说明，元素设置相对定位以后，其本身所在的文档流占据的空间不会改变。

absolute 绝对定位

当被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除。
绝对定位是如何定位的呢？
1.如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，
2.如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，
3.如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）绝对定位的元素相对于谁来定位，我们就把这个”谁”叫着参照物，

举个栗子：

我们给 父级设置 position: relative; 相对定位，给第二个 div 设置 position: absolute; 绝对定位 以及 left: 50px; top: 50px; 的偏移量，那么第二个 div 机会相对于父级 div 有一个绝对定位的偏移量，并且脱离文档流，不占据空间。