页面布局三大核心之三： 定位

定位

[Review: 浮动可以让多个块级盒子在一行没有缝隙的排列显示，常用于横向排列盒子。]

终于轮到定位啦！！

1. 定位的目的： 让盒子自由的在某个盒子内移动位置或者固定位置， 并且可以压住其他盒子

2. 定位模式： 也就是position属性可能的属性值： 静态定位static、相对定位relative、绝对定位absolute、固定定位fixed

   2.1 静态定位static（position属性的默认值）：无定位，可以按照标准流来看待

   2.2 相对定位relative：元素在移动位置的时候，相对它本身原来的位置来移动的。

   [注意]原来位置还在，相对定位并没有脱离标准流，后面的盒子仍然以标准流的方式看它。

   2.3 绝对定位absolute：元素在移动的时候，是根据他的祖先元素来移动的

   [注意] 绝对定位是脱标的！

   2.4 固定定位fixed：元素固定在浏览器可视区的某一位置。

   [注意] 固定定位也是脱离标准流的，不占有原来的位置。

3. 一个非常经典的组合：子绝父相、子绝父绝

   原因：子级绝对定位不会占有位置，可以放到父盒子里任一个位置，不影响其他兄弟。而父盒子相对定位并没有脱离标准流会限制子盒子。如果父盒子也不需要占位置的话，子绝父绝也是可以滴~

4. 绝对定位或者固定定位水平居中：在标准流中，我们可以通过margin: 0 auto；来设置元素水平居中，但是脱离标准流的时候就要{left: 50%; margin-left: -（自身宽度的一半); }