css 定位

        浮动可以让多个块级盒子在一行内排列显示且没有间隙，经常用于横向排版，而定位则是让某个盒子在父盒子内自由的移动或固定在某个位置，并且可以压住其他盒子。 

定位组成：定位模式（指定元素的定位方式） + 边偏移（决定最终位置）

position :

定位模式

属性值	解释
static	静态，默认，不受影响
relative	相对，相对原来的位置，以左上角为起点右下为正方向，保留偏移前的位置
abosolute	绝对，相对最近有定位的元素（父亲没有就找爷爷，都没有的话找body）不保留偏移前位置
fixed	固定，固定在浏览器的可视区域内，跟随页面滑动，不保留偏移前位置
sticky	粘性，相对与固定的混合，固定在浏览器的可视区域内，不跟随页面滑动，保留偏移前位置

边偏移

属性值	解释
top	距离上面
bottom	距离上面
left	距离左边
right	距离右边
在position下面写	单位px

.test{
		position: relative;
		left: 100px;
		top: 100px;
		width: 200px;
		height: 200px;
	}

        在开发中通常使用子绝父相定位（父元素相对定位，子元素绝对定位）。

叠放次序

选择器{

z-index : 数值；

}

        数值大的盒子在上面，数值相同则按书写顺序，后来居上。

fixed固定在版心的右侧：

demo{
		position: fixed;
		left: 50%;
		margin-left: 100px;
/*			版心的宽度为200px*/
	}

绝对定位的盒子居中：

.son{
		position: absolute;
		left: 50%;
		margin-left: -25px;
/*		盒子宽度的一半，负值*/
		top: 50%;
		margin-top: -30px;
		/*		盒子高度的一半，负值*/
		width: 50px;
		height: 60px;
	}

        行内元素加绝对或者固定定位可以直接写宽高，块级元素定位不写宽高的话默认为内容大小。