CSS之position属性

在用CSS布局网页时，我们也经常会用到一个属性，是：position,这个属性的作用是定位，它的值一共有4个。

1、static（默认）：

元素正常生成，块级元素生成一个矩形框，作为文档流的一部分，即以普通流形式展示元素，相当于不产生任何作用。

2、relative（相对定位）

元素框偏移某个距离。元素仍保持其未定位前的形状。

.nav{

    position:relative;

    top:20px;

    left:30px;

}

相对于元素原位置向右移动30px,向下移动20px。

相对定位的原来所占的空间仍保留，相对于自己进行定位。

3、absolute（绝对定位）

元素从文档流完全删除，并相对于其已定位的祖先元素定位。

如果元素没有自己定位的祖先元素，那么定的位置相对于最初的包含块（即body）元素原先在正常文档流中所含的空间会关闭，就好像元素原来不存在一样。元素应用绝对定位后转变为块级元素，不论原来它在正常流中是什么类型的元素。

.nav{

    position:absolute;

    top:20px;

    left:30px;

}

绝对定位相对于就近的position属性不为static的祖先元素进行定位，并且元素本身脱离文档流并变为块元素。

4、fixed（视口定位）

元素框的表现类似于将position设置为absolute。

不过其包含块视窗本身，相对于窗口进行定位。

.nav{

    position:fixed;

    top:20px;

    left:30px;

}

z-index:设置元素堆放次序，z-index值越大则在上层，越小则被盖在底层，它必须配合position属性使用才有效。

使用fixed和z-index最多的时候，我认为是做导航的时候，下面放一个导航的实例，CSS部分的代码（仅供参考）：

.master{ 
	min-width: 320px;
	max-width: 640px;
	position:fixed;
	left:0;
	right:0; //保证元素占据所有的宽度
	bottom:0; //保证元素一直在底部
	z-index:999; //保证元素覆盖在其他元素上方  //整片代码中加粗部分是最核心的部分，其余都可以根据自己的需要去改动
	background:#fff;
	height:39px;
	border-top:2px solid #e7e7e8;
	border-bottom:1px solid #d6d3d6; 
	display: box;
	display: -webkit-box;
	display: -moz-box;
	display: -o-box;
}