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