[TOC] ## 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（fixed）的跟随特性 absolute后的元素的位置虽然是以定位祖先元素或则视口为基准的，但是当我们absolute又没有使用left等移动这个元素时，这个元素仍然在它原本所处的文档流中的位置上。 我们将以上的表现称之为absolute的跟随性（即使祖先元素有定位依然有效） >[danger] 需要注意的一点是固然absolute后的元素仍然会停留在它原本属于文档流时的位置，但它此时已经脱离文档流，不再占位，故它后面的元素会补位。 ### 示例7  ## absolute，天元突破！ 设置了absolute的元素，在父元素无定位的前提下，能够突破父元素的限制（中间没有定位祖先元素，甚至能突破出html元素直到**视口**） 并且在父元素`overflow:hidden`的限制下，`absolute`**仍然有效！** （只要设置overflow:hidden的祖先元素和absolute元素之间没有定位元素）（非absolute/fixed定位的元素都会被裁剪掉） 也就是说，absolute的元素在设置了overflow:hidden的元素的外部**依然可见。**（其它定位只有`fixed`能达到同样的效果） 另外如果是`overflow:auto/scroll`，在满足**设置overflow:\*的祖先元素和absolute元素之间没有定位元素**这条规则下，即使图片超过容器大小，也**不**会出现滚动条 如下图示例，可以在某一个div上模仿类fixed背景效果（fixed只能在视口容器上营造这种效果）  ## absolute与text-align 照理说absolute会使元素块状化，而块级元素是不受text-align影响的，**但是!!** 在absolute的**跟随性**和幽灵空白节点（每个行框盒子在头部都会产生一个）的共同作用之下，text-align就有效果了。 >[warning] **注意:** 如果要兼容IE低版本（不存在幽灵空白节点），则需要手动创造一个空白字符以供定位， > >比如`::before{content:'\2002'}`，其中\2002表示某一种空格 ## absolute与clip clip属性必须配合absolute/fixed才会有效果，需要注意的是clip裁剪相较于overflow裁剪更加"强力"， 体现在这货裁剪的是`border-box`，而overflow是padding-box ## absolute与margin联合の应用场景 ### hot效果 我们常常将relative和absolute一起配合使用，但有些时候relative并不是必须的，它甚至会限制absolute的发挥——毁掉absolute的跟随性  ### 终极奥义:创世纪·宇宙坍塌 需要配合margin:auto，需要明确在哪个容器中展示此奥义并让它定位（容器和absolute的元素之间没有其它定位元素）。