CSS-定位（position）

1. CSS布局的三种机制

• 普通流（标准流）
• 浮动
  让盒子从普通流中浮起来——让多个盒子水平排列成一行。
• 定位
  将盒子定在某一个位置自由的漂浮在其他盒子的上面。

2. 定位详解

定位=定位模式+边偏移

2.1 边偏移

属性：top、bottom、left、right

2.2 定位模式

static 静态模式
relative 相对模式
absolute 绝对模式
fixed 固定模式

2.2.1 静态定位

• 默认定位方式，无定位；
• 按照标准流特性摆放，没有边偏移；
• 几乎不用。

2.2.2 相对定位

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

2.2.3 绝对定位

• 完全脱标——完全不占位置；
• 若父元素有定位，则绝对定位的子盒子以父元素为准；
• 若父元素没有定位，则子元素以浏览器为准定位；
• 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

定位口诀——子绝父相

子绝父相——子级是绝对定位，父级要用相对定位

2.2.4 固定定位

• position:fixed;
• 绝对定位的特殊形式；
• 完全脱标——完全不占位置；
• 只认浏览器的可视窗口；
• 跟父元素没有任何关系，单独使用；
• 不随滚动条滚动。

3. 定位的扩展

3.1 绝对定位

• margin : auto; 不能让绝对定位的盒子水平垂直居中；

• 水平居中：
  -left : 50%; 让盒子的左侧移动到父级元素的水平中心位置；
  -margin-left : -XXpx; 让盒子向左移动自身宽度的一半。

• 垂直居中：
  -top : 50%;
  -margin-top : -XXpx;

3.2 堆叠顺序（z-index）

• z-index可以调整盒子的堆叠顺序：
  -属性值：正整数、负整数或0，默认值是0，数值越大，盒子越靠上；
  -如果属性值相同，则按照书写顺序，后来居上；
  -数字后面不能加单位。
• z-index只能用于相对定位、绝对定位、固定定位。

3.3 定位改变display属性

可以改变显示模式的方式：

• 用 inline-block 转换成行内块；
• 用浮动 float 默认转换成行内块（类似，浮动脱标）；
• 绝对定位和固定定位默认转换成行内块。