css笔记 - 张鑫旭css课程笔记之 absolute 篇

absolute绝对定位

绝对定位与浮动鲜为人知的兄弟关系

即是说，absolute后，元素和浮动元素的特性差不多，只不过absolute脱离文档流，元素飘在天上，float还在凡间。

所以，absolute元素的特性：

1. 包裹性 容器使用absolute后，就形成一个inline-block包裹了内部元素，具有包裹性。
2. 破坏性 子元素绝对定位，脱离父元素文档流，父元素高度塌陷。

这俩特性和float是一模一样的，所以说其兄弟关系。

absolute和relative的关系

二者并不是兄弟。而是自由与枷锁的关系，即限制与被限制的关系。分离的，对立的关系。 就像：clear限制float一样，relative限制absolute。

absolute越独立越强大

如果没有relative的限制，他能在整个可视区域漂流。 行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值。 很强大！ 甚至超越overflow的限制，超出范围也可以不被隐藏。

absolute行为表现

在给一个元素单独设置了absolute之后，其表现如下:

1. 脱离文档流让位给后人，自己原来的位子让出来给后边的元素
2. 自己却垂直而上飞上天，但只是垂直而上，还是在自己原来位置的上空，不进行任何位移(初始不设置方位值得情况下) 这种现象就好像是一条排着长队的人龙，里边一个人使用了absolute后，向上弹出，后边的人向前一步占据他的位置，而他则骑到了后边人的脖子上。 对于前后排列的多个浮动兄弟元素，其中一个使用absolute，只是飘起来不改位置的行为不适用此情景

absolute特性表现

1. 去浮动：absolute和float不能同时存在，如果之前有float，使用absolute后，float失效。
2. 位置跟随：也就是行为表现里的第二条，自己垂直飞上天后，其位置还是跟随原来在地面时的点，如果地面的点移动，他也会移动，如果地面的点不动，他就是在原来点的垂直方向上稳住。就像旗杆上的旗子，虽然飘在天上，但是永远飘不走。 利用这个特性可以制作覆盖类型的小图标：详情见位置跟随特性应用.html