CSS定位（position）

CSS 布局的三种机制

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中：

1. 普通流（标准流）
   自上而下显示，自左而右显示
2. 浮动
   • 让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。
3. 定位
   • 将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是后面的 js 特效。

静态定位(static)

• 静态定位是元素的默认定位方式，无定位的意思。
• 静态定位 按照标准流特性摆放位置，它没有边偏移。

相对定位(relative)

相对定位是元素相对于它 原来在标准流中的位置来说的。
相对定位的特点：

• 相对于 自己原来在标准流中位置来移动的
• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位(absolute)

标准流的子盒子总是以父级为准移动位置
绝对定位是元素以带有定位的父级元素来移动位置

1. 完全脱标 —— 完全不占位置；
2. 父元素没有定位，则以浏览器为准定位（Document 文档），以浏览器的左上角为基点。
3. 父元素要有定位

• 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点：

• 绝对是以带有定位的父级元素来移动位置，如果父级都没有定位，则以浏览器文档为准移动位置
• 不保留原来的位置，完全是脱标的。
  因为绝对定位的盒子是以带有定位的父级元素来移动位置，所以要和父级搭配一起来使用。

绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢?
因为父级要占有位置，子级要任意摆放，所以子级是绝对定位，父级要用相对定位。

固定定位(fixed)

固定定位是绝对定位的一种特殊形式： 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形

1. 完全脱标 —— 完全不占位置；
2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
   • 跟父元素没有任何关系；单独使用的
   • 不随滚动条滚动。
     提示：IE 6 等低版本浏览器不支持固定定位。