三、固定定位
固定定位(fixed),就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。固定定位和绝对定位有相似之处,IE6以上版本才支持这项属性,以我的理解,固定定位总是以当前的页面为基准进行偏移,和背景图片固定,内容滚动的效果一样。使用固定定位会脱离标准流!
通过在顶部导航条使用固定定位来认识固定定位
Document
*{
margin: 0;
padding: 0;
}
body{
/*为什么要写这个?*/
/*不希望我们的页面被nav挡住*/
padding-top: 60px;
/*IE6不兼容固定定位,所以这个padding没有什么用,就去掉就行了*/
_padding-top:0;
}
.nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
z-index: 99999999;
}
.inner_c{
width: 1000px;
height: 60px;
margin: 0 auto;
}
.inner_c ul{
list-style: none;
}
.inner_c ul li{
float: left;
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
}
.inner_c ul li a{
display: block;
width: 100px;
height: 60px;
color:white;
text-decoration: none;
}
.inner_c ul li a:hover{
background-color: gold;
}
p{
font-size: 30px;
}
.btn{
display: block;
width: 120px;
height: 30px;
background-color: orange;
position: relative;
top: 2px;
left: 1px;
}
运行结果如下,这里做了简单的注释