【内容】
1.定位
将盒子定在某一个位置，自由的漂浮在其他盒子的上面。CSS离不开定位。
记忆法：
标准流在最底层（海底），浮动的盒子在中间层（海面），定位的盒子在最上层（天空）。
2.定位组成
定位也是用来布局的，有两部分组成：
定位=定位模式+边偏移。
（1）边偏移
我们定位的盒子，是通过边偏移来移动位置的。
在CSS中，通过top、bottom、left和right属性定义元素的边偏移，具体如下：
| 边偏移属性 |
示例 |
描述 |
| top |
top: 80px; |
顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom |
bottom: 80px; |
底部偏移量，定义元素相对于其父元素下边线的距离 |
| left |
left: 80px; |
左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right |
right: 80px; |
右侧偏移量，定义元素相对于其父元素右边线的距离 |
说明：
定位的盒子有了边偏移才有价值，一般情况下，凡是有定位地方必定有边偏移。
（2）定位模式（position）
在CSS中，通过position属性定义元素的定位模式，语法如下：
选择器 { position: 属性值; }
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式：
| 值 |
语义 |
| static |
静态定位 |
| relative |
相对定位 |
| absolute |
绝对定位 |
| fixed |
固定定位 |
1）静态定位
是元素的默认定位方式，无定位的意思，相当于border里面的none，不要定位的时候用。
换句话说，静态定位就是按照标准流特性摆放位置，没有边偏移。
2）相对定位（自恋型）
相对定位是元素相对于它原来在标准流中的位置来说的。
相对定位的特点：
相对于自己原来在标准流中位置来移动的。
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
3）绝对定位（拼爹型）
是元素以带有定位的父级元素来移动位置。
特点：
—完全脱标：完全不占位置。
—父元素没有定位，则以浏览器为准定位（Document文档）。
—父元素有定位，将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
定位口诀：
子绝父相—子级（不占位置）是绝对定位，父级（占用位置）要用相对定位。
4）固定定位（认死理型）
是绝对定位的一种特殊形式，如果说绝对定位是一个矩形，那固定定位就类似于正方形。
特点：
—完全脱标：完全不占位置。
—只认浏览器的可视窗口：浏览器可视窗口+边偏移属性 来设置元素的位置。
—跟父元素没有任何关系。
—不随滚动条滚动。
3.绝对定位的盒子居中
在使用绝对定位时想要实现水平居中，可以按照以下的方法实现：
（1）left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。
（2）margin-left: -100px; 让盒子向左移动自身宽度的一半。
举例：
div {
position: absolute;
left: 50%; /* 走父亲宽度的一半 */
margin-left: -100px; /* 向左走自己宽度的一半 */
width: 200px;
height: 200px;
}
注意：
绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中。
4.堆叠顺序（z-index）
在使用定位布局时，可能会出现盒子重叠的情况。加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。
应用z-index层叠等级属性可以调整盒子的堆叠顺序，z-index的特性如下：
（1）属性值：正整数、负整数或0，默认值是0，数值越大，盒子越靠上。
（2）如果属性值相同，则按照书写顺序，后来居上。
举例：
.damao {
z-index: 2;
}
.ermao {
z-index: 1;
...;
}
效果：damao在ermao上面。
5.定位小结
| 定位模式 |
是否脱标占有位置 |
移动位置基准 |
模式转换（行内块） |
使用情况 |
| 静态static |
不脱标，正常模式 |
正常模式 |
不能 |
几乎不用 |
| 相对定位relative |
不脱标，占有位置 |
相对自身位置移动 |
不能 |
基本单独使用 |
| 绝对定位absolute |
完全脱标，不占有位置 |
相对于定位父级移动位置 |
能 |
要和定位父级元素搭配使用 |
| 固定定位fixed |
完全脱标，不占有位置 |
相对于浏览器移动位置 |
能 |
单独使用，不需要父级 |
注意：
边偏移需要和定位模式联合使用，单独使用无效；
top和bottom不要同时使用；
left和right不要同时使用。
7.网页布局
一个完整的网页，有标准流、浮动、定位，一起完成布局的，每个都有自己的专门用法。
标准流：
可以让盒子上下排列或者左右排列的。
浮动：
可以让多个块级元素一行显示，或者左右对齐盒子、浮动的盒子就是按照顺序左右排列。
定位：
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，但是每个盒子需要测量数值。
