CSS to achieve a similar fixed floating div thast always on top of other divs - like stackoverflow does?

问题

I'd like to achieve a similar effect as the one in this image:

Basically, I want to have a div as a menu bar that's always on top - the div beneath it being the container div for my content. Clicking any links in my menu bar only change the content in the container div.

回答1:

You need to use the position: fixed; property for #top div.

<div id="top"></div>

#top {
  position:fixed;
  top:0px;
  width:100%;
  height:70px;
}

回答2:

You need to have a div and assign the CSS classes:

.className {
width: 100%;
position: fixed;
top: 0px;
height: 75px;
}

Then on your div have: <div class="className">Whatever</div>

来源：https://stackoverflow.com/questions/5206413/css-to-achieve-a-similar-fixed-floating-div-thast-always-on-top-of-other-divs