html - 如何获得带有导航的固定标题

Question

我是整个 HTML 和 CSS 的新手，但到目前为止一切都还不错。

现在我需要将标题贴在顶部，这样向下滚动时它会停留在顶部，其他内容会滚动浏览。

我一直在谷歌搜索和搜索，但找不到最好的解决方案，我希望你能帮助我!

仅供引用，我使用的是 960 网格。

代码如下:

    <div class="container_12">
    <header class="fixed">
        <img src="img/logolangt.jpg" alt="MB it logo" class="grid_12"/>
        <nav class="grid_12" id="mainnav">
            <ul>
                <li><a href="index.html" class="selected">Services</a></li>
                <li><a href="career.html">Career</a></li>
                <li><a href="clients.html">Clients</a></li>
                <li><a href="about us.html">About</a></li>
            </ul>
        </nav>
        <nav class="grid_12" id="servicesnav">
            <ul>
                <li><a href="#">HCM</a></li>
                <li><a href="#">SAP</a></li>
                <li><a href="#">SuccessFactors</a></li>
                <li><a href="#">Support</a></li>
            </ul>
        </nav>
    </header>   

这是 CSS 代码:

    .container_12 {
background: white;  
}

/*
**************
* =header
**************
*/

header img {
padding: 20px 0 20px 20px;
}

/*
**************
* =mainnav
**************
*/

#mainnav {
top: -3px;
background-color: #26719b;
font-size: 1.8em;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
position:relative;
height:40px;
font-family: "Segoe UI";
padding: 0 0 0 20px;
text-align: center;
border-radius: 10px;
}  


#mainnav ul li {
margin-right: 50px;
text-align: center;
display: inline;
}

#mainnav li a {
color: white;
text-decoration: none;
text-align: center;
padding: 1px 16px 8px 16px;
}
nav li {
display: inline;
}

#mainnav li a:hover, .selected {
background: #f7a634;
border-radius: 5px;
}


/*
**************
* =subnavs
**************
*/

#servicesnav, #careernav, #clientsnav, #aboutnav  { 
font-size: 1.3em;
font-weight: bold;
background-color: #f7a634;
width: 430px;
height: 31px;
display: inline-block;
padding-top: 4px;
margin-top: -3px; 
border-radius: 10px;
}

#servicesnav li a {
color: white;
text-decoration: none;      
}

#servicesnav ul li {
padding-top: 20px;
}

#careernav { 
margin-left: 180px;
}

#careernav li a {
color: white;
text-decoration: none;
}

#careernav ul li {
padding-top: 20px;
margin-left: 80px;
}

#clientsnav { 
margin-left: 360px;
}

#clientsnav li a {
color: white;
text-decoration: none;      
}

#clientsnav ul li {
padding-top: 20px;
margin-left: 90px;
}

#aboutnav { 
margin-left: 520px; 
}

#aboutnav li a {
color: white;
text-decoration: none;      
}

#aboutnav ul li {
padding-top: 20px;
margin-left: 54px;
}

/*
**************
* =general
**************
*/

p, h1, h2, h3 {
font-family: "Segoe UI", sans-serif;
}

.sections h2 {
text-align: center;
font-weight: bold;
font-size: 1.6em
}

/*
**************
* =main
**************
*/
.main .grid_8 {
margin-top: 20px;
}


/*
**************
* =services-->
**************
*/

#hcm, #sap, #successfactors, #support {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}


#sap {
background-color: #f7a634;  
}


 #successfactors {
background-color: #26719b;
}


#support {
background-color: #f7a634;
}

/*
**************
* =career-->
**************
*/

#workingat, #jobs {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}


#jobs {
background-color: #f7a634;  
}

/*
**************
* =clients-->
**************
*/

#clients, #testimonials {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
 }


#testimonials {
background-color: #f7a634;  
}

/*
**************
* =aboutus-->
**************
*/

#values, #partnerships, #contact {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}


#partnerships {
background-color: #f7a634;  
}


 #contact {
background-color: #26719b;

非常感谢!

--编辑以包含更多 CSS 代码--

Answer 1

你只需要将它放在你的 CSS 中。

#mainnav {
    position:fixed;
}

看看http://jsfiddle.net/qxXXw/你也可能想看看 http://www.w3schools.com/css/css_positioning.asp为了更好地理解 css 位置，我知道一开始我花了一些时间才弄明白。