CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流 浮动以及定位，定位是将盒子定在某一个位置，自由的漂浮在其他盒子的上面，很大程度上面丰富了页面内容，可以说CSS 离不开定位，特别是后面的 js 特效。

要了解定位我们首先必须知道定位也是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移

我们定位的盒子，就是通过边偏移来移动位置的，而定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式,定位模式总共有四种，分别如下：

1.静态定位(static)

  这个定位可以忽略不管，因为静态定位就是没有定位，我们基本用不上

2.相对定位(relative)

  相对定位是相对于自己原来在标准流中位置来移动的，

  原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

3.绝对定位(absolute)

  绝对定位是完全脱标 —— 完全不占位置，

  父元素没有定位，则以浏览器为准定位（Document 文档）

  绝对定位的盒子要和父级搭配一起来使用的，我们一般父级用相对定位子集用绝对定位，口诀为子绝父相。

4.固定定位(fixed)

  固定定位跟父元素没有任何关系；单独使用的,不随滚动条滚动,

  固定定位移动的基准是当前页面的可视区域

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流 浮动以及定位，定位是将盒子定在某一个位置，自由的漂浮在其他盒子的上面，很大程度上面丰富了页面内容，可以说CSS 离不开定位，特别是后面的 js 特效。

要了解定位我们首先必须知道定位也是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移

我们定位的盒子，就是通过边偏移来移动位置的，而定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式,定位模式总共有四种，分别如下：

1.静态定位(static)

  这个定位可以忽略不管，因为静态定位就是没有定位，我们基本用不上

2.相对定位(relative)

  相对定位是相对于自己原来在标准流中位置来移动的，

  原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

3.绝对定位(absolute)

  绝对定位是完全脱标 —— 完全不占位置，

  父元素没有定位，则以浏览器为准定位（Document 文档）

  绝对定位的盒子要和父级搭配一起来使用的，我们一般父级用相对定位子集用绝对定位，口诀为子绝父相。

4.固定定位(fixed)

  固定定位跟父元素没有任何关系；单独使用的,不随滚动条滚动,

  固定定位移动的基准是当前页面的可视区域