在用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;
}