五、定位详解

1. 边偏移（方位名词）
   简单说， 我们定位的盒子，是通过边偏移来移动位置的。

2. 定位模式 (position)
   定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

   a. 静态定位(static) - 了解
   b. 相对定位(relative) - 重要
   相对定位的特点：（务必记住）
   - 相对于 自己原来在标准流中位置来移动的
   - 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
   c. 绝对定位(absolute) - 重要
   绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）
   1. 完全脱标 —— 完全不占位置；
   2. 父元素没有定位，则以浏览器为准定位（Document 文档）。
   3. 父元素要有定位：- 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
   d. 固定定位(fixed) - 重要
   设置了固定定位的元素，会参考浏览器的可视区域

3. 定位(position)的扩展
   1) 绝对定位的盒子居中
   注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
   在使用绝对定位时要想实现水平居中
   1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
   2. margin-left: -100px;：让盒子向左移动自身宽度的一半。
   2) 堆叠顺序（z-index）
   在使用定位布局时，可能会出现盒子重叠的情况。
   加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
   应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。

    	z-index 的特性如下：
    		1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；	
    		2. 如果属性值相同，则按照书写顺序，后来居上；
    		3. 数字后面不能加单位。
    	注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
    3) 定位改变display属性
    	改变显示模式有以下方式
    		- 可以用inline-block  转换为行内块
    		- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
    		- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
    	所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
   

4. 定位小结

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