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

Question

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.

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