Question

这是HTML代码

<div id="header" class="grid_12">
<h6>DCHOST - Brought to you by <a href="http://www.dt.co.uk" target="_blank">
DataConnectivity.co.uk
</a></h6>
            <ul>
                <li>Home</li>
                <li>Hosting</li>
                <li>Domain Names</li>
                <li>Lates News</li>
                <li>About us</li>
                <li>Contact Us</li>
            </ul>
        </div> <!-- ends header grid 12 -->

CSS

#header {
color: #848484;
height: 70px;
width: 100%;
font-size: small;
font-style: oblique;
text-align: center;
background: #333333;}

#header h6 {
max-height: 3px;
font-size: 10px;
text-align:left;
}

#header li {
font-weight: 800;
color: #FFFFFF;
font-style: normal;
display: inline}

我希望我的导航栏保持固定在页面顶部。但是，每次我将位置更改为固定时，条形图都会完全消失。我不知道为什么这样做？在此先感谢您的帮助！

Answer 1

您需要使用top: 0;定位标题，并将z-index设置为高于所有其他元素。

#header {
    position: fixed;
    top: 0;
    z-index: 999;
}

这也将增加浏览器之间的兼容性。

<强> Demo

滚动时如何让导航栏保持在页面顶部？

1 个答案: