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

最新推荐文章于 2022-07-12 17:59:58 发布

xuyf

最新推荐文章于 2022-07-12 17:59:58 发布

阅读量684

点赞数 1

分类专栏：网络及网页编程

本文链接：https://blog.csdn.net/yavobo/article/details/46336443

版权

网络及网页编程专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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">
    &copy; 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