CSS相对定位与绝对定位的理解

最近在学习H5的内容，基本上都是快速向前推进，大致把基础的部分都看完了。在CSS这一块儿，我觉得初学者最迷茫的就是相对定位与绝对定位了，这块儿我也看了很久，尝试了一下代码有了自己的理解。
不准备写很多的代码很多的案例，我觉得先理解为主吧，大量的代码示例反而会造成压力。
我们知道，当我们没有给元素设置定位属性的时候，它默认的是static，存在于文档流之中依次排列，此时你去设置left、right、top、bottom属性时并不会有什么作用。
如果只是单纯的static定位布局，那么肯定不会有那么多复杂的界面效果了，所以我们就要用到其它的定位方式，最常用的relative相对定位和absolute绝对定位。

理解这里的关键是有以下几点

1.是否还存在于文档流中
2.参照物是谁？也就是相对于谁进行偏移的

先来说说absolute绝对定位

1.绝对定位是脱离了标准文档流的，所以你经常看到称其为“浮”了起来，事实上它确实浮了起来，如果可以立体显示，你会看到层级，最下面是标准文档流，在标准文档流上面是一个个新的文档流（可以想象一下楼层）。限制于显示方式，我们看不到这些，但你要是知道它们是有层级的，既然有层级那么就有了z-index属性，这个属性就是用来调整层级的；
2.绝对定位是可以设置left、right、top、bottom属性的，那么他就需要参照物。它的参照物是如何选取的呢也就是依靠谁来偏移位置呢？如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位。如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位。
还有一点比较有意思的是，设置完absolute属性之后如果你不去设置偏移量，他是不会产生效果的。

relative相对定位

1.relative相对定位是没有脱离标准文档流的，也就是说你设置了相对定位它和默认的static一样会占据标准文档流的空间影响其他元素。很明显，它是不会像绝对定位一样浮起来的。
2.相对定位的参照物很特殊，是相对于自身进行偏移。这个好像很神奇，相对于自身偏移那它自己也必须确定好位置啊？其实它处在标准文档流里就已经有了自己的位置所以它能以自身进行偏移。
当它于自身产生偏移时，它在文档流中占据的位置并没有发生变化，但显示效果上它确实偏移了，像下面这样：

D43BB5AC-A229-4246-8E68-79AB6663F3E7.png

中间蓝色的div块是设置了相对定位和偏移的，但它在文档流中占据的空间并没有发生变化并且依旧影响着周围的元素，只是在显示效果上我们能看到它偏移了。