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