css炼金の强大的absolute!!

[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

你可能感兴趣的:(css炼金の强大的absolute!!)