您的位置：首页 > Web前端 > CSS

CSS固定顶底之二（肯定有效）

2015-06-02 22:44 519 查看 
CSS文件：
#navbar{
background-image: url(../img/navbg.png);
background-repeat:repeat-x;
background-position: left top;

height: 100px;
width: 100%;

position:absolute;
position:fixed!important;
z-index:100;
}

#container{
background-image: url(../img/mainbg.png);
background-repeat:repeat-y;
background-position: left top;

height: 1800px;
width: 788px;

margin: 0 auto;
}

#leftnav{
position: fixed;
height: 300px;
width: 200px;

top: 120px;
left: 30px;
background-color: green;
}

#foot{
height: 32px;
line-height: 32px;
text-align: center;
text-size: 30px;
}


HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<title>试试！</title>
<link href="../css/reset.css" type="text/css" rel="stylesheet">
<link href="../css/home.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="navbar">
</div>
<div id="container">
<div id="leftnav">
</div>
</div>
<div id="foot">
© test.com, 2015
</div>
</body>
</html>


置顶的关键点：

1、必须明确DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> //关键技术0，需采用XTHML 1.0标准：//W3C//DTD XHTML 1.0 Transitional//EN</span>
2、CSS中采用FIXED及Z-INDEX指标：

#navbar{

background-image: url(../img/navbg.png);

background-repeat:repeat-x;

background-position: left top;

height: 100px;

width: 100%;

position:absolute; //关键技术一，完全定位：absolute

position:fixed!important; //关键技术二，固定定位：fixed

z-index:100; //关键技术三，该区块需置顶优先：z-index

}

3、总结关键技术点：

（1）首先应该明确必须采用DTD XHTML 1.0 Transitional//EN标准

（2）对固定的区域应该采用完全定位：position:absolute

（3）对固定的区域还要采用固定定位：position:fixed

（4）并且应对固定的区域优先置顶的等级：z-index:1000
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航