布局之定位的介绍

定位组成

定位：将盒子定在某一个位置，定位即摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式；边偏移则决定了该元素的最终位置。
1、定位模式：通过position属性设置，语法为 选择器 {position:属性值;} 属性值可分为以下四个：

1. static 静态定位：（不经常用）
   按照标准流特性摆放位置，没有边偏移。
2. relative 相对定位（自恋型） ：
   元素在移动时相对于原来位置说的（参照点为原位置），原来在标准流的位置继续占有，后面的盒仍以标准流的方式对待（不脱标，保留原来位置）。
3. absolute 绝对定位（拼爹型）：
   元素在移动时相对于祖先元素说的，如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位；如果祖先元素有定位，则以最近一级的定位祖先元素为参考点移动位置。原来在标准流的位置不再占有原来位置（脱标）。
4. fixed 固定定位：
   元素不移动，固定于浏览器可视区的位置，在浏览器页面滚动时元素位置不变。以浏览器可视窗口为参照点移动元素，与父元素没有关系，不占有原来位置（脱标）。
   固定定位的盒子贴着版心右侧固定对齐：
   1、让固定定位的盒子left：50% 走到浏览器可视区（也可以看做版心）的一半位置。
   2、让固定定位的盒子margin-left：版心宽度的一半距离px。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。
   

拓展：
1.绝对定位的盒子居中：
加了绝对定位的盒子不能通过margin:0auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。
① left:50%；：让盒子的左侧移动到父级元素的水平中心位置。
② margin-left:-100px;：让盒子向左移动自身宽度的一半。
2.绝对定位(固定定位)会完全压住盒子：
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)，但是绝对定位(固定定位)会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。

子绝父相：

子级是绝对定位的话，父级用相对定位（一般情况下），这是因为父盒子需要占位置，因此是相对定位，子盒子不需要占位置，则是绝对定位。
（1）、子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
（2）、父盒子需要加定位限制盒子在父盒子内显示。

2、边偏移：有四个属性，其后跟多少px：

1. top 顶端偏移量，定义元素相对于其父元素上边线的距离。
2. bottom 底部偏移量，定义元素相对于其父元素下边线的距离。
3. left 左侧偏移量，定义元素相对于其父元素左边线的距离。
4. right 右侧偏移量，定义元素相对于其父元素右边线的距离。

叠放次序

使用定位布局时，可能会出现盒子重叠的情况。用z-index来控制盒子的前后次序（z轴）
语法：选择器 { z-index: 1;}
（1）、数值可以是正整数、负数或auto，数值越大，盒子越靠上；
（2）、属性值相同，则按照书写顺序，后来居上；
（3）、数字后面不能加单位；
（4）、只有定位盒子才有z-index属性；