How to keep the header at fixed position even while page is scrolling

Question

I am trying to create a header which remains fixed at top but what happens is when i scroll down the page the header moves along with it while maintaining its position. My requirement is that the header shouldn't move with the page as we scroll down.

JS FIDDLE:https://jsfiddle.net/qa5d1ry0/

Note : Its just a dummy code of my layout and i have added random text in order to get the code working

Note : I have tried using position:absolute for header but the problem is that header don't get displayed as we scroll

Answer 1

Try to give position: fixed; to the header and remove the relative position from container.

.header {
    position: fixed;
} 

Answer 2

Try to add top:0px; after your position:fixed; for the header/heading div.

Answer 3

It's fixed for me. Try position: fixed . What browser are you using?