html fijo div superpuesto por otro div

Estoy diseñando un sitio web, dentro del cual quiero tener una toolbar de toolbar en la parte superior, sin importar cómo actúe el desplazamiento, la toolbar div estará siempre en la parte superior. Esto es lo que tengo hasta ahora:

http://jsfiddle.net/RjHMH/85/

 

Estoy utilizando google table js library para adjuntar una tabla dentro de table_div , pero cuando me table_div hacia abajo en la tabla, el button en la parte superior está superpuesto por la tabla. ¿Cómo arreglar esto?

Para ser más específicos: lo que quiero es así que lo que hizo w3school , tienen una barra de herramientas siempre en la parte superior.

¿Cómo implementaría algo como esto? Una pequeña demostración en jsfiddle sería genial.

  .stuckpart{ position:fixed; padding-bottom: 200px; z-index:100 } 

z-index resolverá su problema de superposición.

 #nav_bar { position: fixed; background-color:blue; height:50px; width:100% } #content { background-color:lightgreen; overflow-y:auto; height:200px; position:relative; width:100%; top:50px; } 

http://jsfiddle.net/oa7mfcmb/6/

Esto moverá su barra de navegación a la parte superior de la página y la mantendrá allí mientras se desplaza por la página.

    #nav_bar { position: fixed; top: 0px; //the rest of your nav bar style } 

HTML:

  

CSS:

 .menu { background-color: #000000; width: 500px; height: 50px; position: fixed; margin-top: 0px; } 

La posición fixed es importante.