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

Question

Here is the HTML code

<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}

I would like my nav bar to remain fixed on top of page. However, every time I change position to fixed, the bar completely disappears. I have no idea why its doing this? Thanks in advance for your help!

Answer 1

You need to position the header with top: 0; and set the z-index to be higher than all other elements.

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

This will also add compatibility between browsers.

Demo