[danger] 多图预警，此文非塑料制品会不断更新
[tip] 掘金的可用页面大小为650px,文友放图时可以此为参考
absolute概要
众所周知absolute能让一个元素依据它的定位父级进行定位，如果没有定位父级则会根据视口来进行定位。
absolute与视口
没有定位父级的时候，绝对定位的元素是以视口为定位基准的而不是html。
示例1
absolute与fixed
fixed定位的祖先元素也能作为absolute的元素的定位基准
示例2
absolute与display
absolute的元素和float后的元素一样，浏览器都会隐形的将元素转换成block级别
absolute的伸缩特性
一般我们为一个元素设置宽高无外乎两种方式：
- 通过
px直接在元素身上设置 - 通过
%根据父容器的大小来设置
而利用absolute的伸缩特性，也能帮助我们为元素设置宽高。
最大拉伸大小
示例3
如果定位元素的祖先元素没有定位，最大可拉伸到与视口等大。
示例4
如果定位元素的祖先元素有定位（包括fixed定位），最大只能拉伸到定位祖先元素的宽高。
absolute、%以及子元素
利用absolute设置元素大小的元素的子元素是可以利用%来设置大小的，它的参考标是它的定位父级元素（没有，则为视口）
[warning] 注意： 这一点在父元素高度不明确的情况下（使用min/max-height或不定义高度的情况下），仍然适用。（非定位的话，百分就会失效为auto）
示例5
absolute拉伸的自适应性和块级元素自适应性的区别
从上面的例子中我们不难看出通过absolute拉伸的元素的宽高都是自适应的，或依据视口大小的改变而改变，或依据定远父级的大小改变而改变。
有的同学会说，块级元素不都是如此吗？ 块级元素所有也有伸缩特性，但只在水平方向，我们仔细观看上面的例子，不难发现我们通过absolute是元素在垂直方向也进行了伸缩拉伸。 除此之外，我们还能在这个自适应的范围里进行一些定制，达到什么三列布局左右边定宽中间自适应什么的。（会在最后的应用中举栗）
实例6
以下达到了一个类似于padding但确是自适应父容器content的效果
absolute的跟随特性
absolute后的元素的位置虽然是以定位祖先元素或则视口为基准的，但是当我们absolute又没有使用left等移动这个元素时，这个元素仍然在它原本所处的文档流中的位置上。 我们将以上的表现称之为absolute的跟随性
[danger] 需要注意的一点是固然absolute后的元素仍然会停留在它原本属于文档流时的位置，但它此时已经脱离文档流，不再占位，故它后面的元素会补位。
示例7
absolute，天元突破！
设置了absolute的元素，在父元素无定位的前提下，能够突破父元素的限制（中间没有定位祖先元素，甚至能突破出html元素直到视口）
并且在父元素overflow:hidden的限制下，absolute仍然有效！ （非absolute/fixed定位的元素都会被裁剪掉）
也就是说，absolute的元素在设置了overflow:hidden的元素的外部依然可见。（其它定位只有fixed能达到同样的效果）
absolute与margin联合の应用场景
hot效果
我们常常将relative和absolute一起配合使用，但有些时候relative并不是必须的，它甚至会限制absolute的发挥——毁掉absolute的跟随性
终极奥义:创世纪·宇宙坍塌
需要配合margin:auto，需要明确在哪个容器中展示此奥义并让它定位（容器和absolute的元素之间没有其它定位元素）。
