CSS定位与动画

一、理解为什么需要定位

浮动只能实现元素水平布局的效果，不能实现让元素实现复杂的布局效果。

二、掌握CSS定位的组成

定位也是用于布局的，主要由两个部分组成：

定位=定位模式+偏移量

定位模式用于指定一个元素在文档中的定位方式。

偏移量则决定了该元素的最终位置

三、掌握定位的4种模式

1.静态定位

特点：静态定位 按照标准流特性摆放位置，它没有边偏移。

2.相对定位(relative)与绝对定位(absolute)

相对定位特点：1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化 2.相对定位

                         会提升元素的层级。 3.相对定位不会使元素脱离文档流。 4.相对定位不会改变元

                         素的性质块还是块，行内还是行内。

绝对定位特点：1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化。 2.开启绝对定

                         位后，元素会从文档流中脱离。 3.绝对定位会改变元素的性值，行内变成块，块

                         的高度被内容撑开的。 4.绝对定位会使元素提升一个层级。

3.固定定位(fixed)

特点： 1.固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样。

            2.固定定位不占有原先位置，脱离标准流。 3.固定定位的元素不会随网页的滚动条滚动。

4.粘滞定位(sticky)

特点： 1.粘滞定位和相对定位的特点基本一致。 2.粘性定位占用原