定位一共有4个方向，left,right,top,bottom;
格式为：先写定位方式，后写方向。

position:absolute;
top:20px;
left:30px;

静态定位

语法：position:static;
默认值：文档流（元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行）。这是默认的定位方式。

绝对定位

语法：position:absolute;
特点：

• 元素使用绝对定位之后不占据原来的位置（脱标）。
• 元素使用绝对定位，位置是从浏览器出发。
• 嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发，如果父盒子使用了定位，子盒子的位置就从父盒子位置出发。
• 给行内元素使用绝对定位之后，转换为行内块。（不推荐使用此方法转行内块）

相对定位

语法:position: relative;
特点：

• 使用相对定位，位置从自身所在的位置出发。
• 元素一走后，还会占据原来的位置，不会有其他元素填补。
• 父元素相对定位，子元素绝对定位，子元素就会从父元素位置开始计算。（建议使用）

• 行内元素使用相对定位不能转行内块

  固定定位

  语法：position:fixed;
  特点：

• 元素使用绝对定位之后不占据原来的位置（脱标）。
• 元素使用固定定位之后，位置从浏览器出发。
• 给行内元素使用固定定位之后，转换为行内块。（不推荐使用此方法转行内块）

附录：定位的盒子垂直居中

• margin:0 auto; 只能让标准流的盒子居中对齐。
• 定位的盒子居中：先水平移动父元素盒子的一半50%，在向反方向移动子盒子的一半(margin-left:负值。)

注意：

• left比right，权重高。有left又有right的时候，执行left的值。
• top比bottom，权重高。有top又有bottom的时候，执行top的值。
• 定位中，两个定位（static和relative）不能将行内元素转化为行内块,另外两个可以。