CSS定位、过渡、变形与动画

CSS定位

为什么需要定位？

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

定位的组成

定位也是用于布局的，主要由两个部分组成：定位=定位模式+偏移量

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

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

偏移量

当元素开启了定位之后，可以通过偏移量来设置元素位置

top：定位元素和定位位置上边的距离

bottom：定位元素和定位位置下面的边距

left：定位元素和定位位置左侧距离

right：定位元素和定位位置右侧距离

开启定位

语法规则

   选择器{

      position:定位模式

   }

定位模式

静态定位

   div{

      position: static;

   }

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

相对定位(relative)

   div{

      position: relative;

   }

特点：

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

2.相对定位会提升元素的层级。

3.相对定位不会使元素脱离文档流。

4.相对定位不会改变元素的性质块还是块，行内还是行内。

参照位置：

相对定位是参照于元素本身在文档流中的位置进行定位的。坐标参考系是以自己的位置（x，y&#