定位

什么是定位？

定位可以将盒子定在某一个位置 ，并且自由地漂浮在其他盒子（标准流、浮动）的上面 。CSS 离不开定位，特别是后面的运用 js 特效。

定位用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

边偏移

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

定位的盒子有了边偏移才有意义。

定位模式（position）

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

静态定位（static）

• 静态定位是元素的默认定位方式，即无定位的意思。
• 静态定位按照标准流特性摆放位置，它没有边偏移。
• 静态定位在布局时我们几乎不用的

相对定位（relative）

1. 相对定位是元素相对于盒子原来在标准流中的位置来说的。如下面这个案例：

1. 值得注意的是：

被相对定位的盒子原来在标准流的位置继续占有，其他盒子仍然以标准流的方式对待它。

绝对定位（absolute）

绝对定位是元素以带有定位的父元素（或祖先）或页面进行定位。

1. 父元素有定位（或祖先）。元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位，如下面这个案例：

1. 父元素没有定位，则以页面为准进行定位。如下面这个案例：

1. 值得注意的是：被绝对定位的元素完全脱离标准流，不占有原来的位置。

2. 扩展：在页面布局中，通常子级元素用绝对定位，父级元素用相对定位。因为父级元素要保留原来在页面中的位置，子级元素要以父级元素为参考进行定位。

固定定位（fixed）

1. 固定定位是以浏览器视窗为依据进行定位的，与父级元素没有关系。被固定定位的元素和绝对定位一样会脱离标准流，不占据页面的位置。如下面这个案例：

以浏览器视窗为依据进行定位的一个表现，就是被固定定位的元素不随滚动条滚动

1. 注意：IE 6 等低版本浏览器不支持固定定位。

总结

注意：

1. 边偏移需要和定位模式联合使用，单独使用无效；
2. top 和 bottom 不要同时使用；
3. left 和 right 不要同时使用。