Question

I’m trying to create a website based on THIS DESIGN.
it’s tutorial can be found HERE

I want to create a fixed header which will contain the username and password text InputBoxes or the username if the user is already logged in.
I tried to do it the usual way using the following CSS.

    position: fixed;
    width: 100%;
    top: 0;

but somehow the header doesn’t display at all.
How do I have a header that is fixed and remains there no matter how many divisions i scroll through in above design?

Answer 1

Here’s how you can do it:

1. Either set the height of the fixed-header or populate it with content so it isn’t empty
2. Set a high z-index so it doesn’t get overlapped by #st-container

CSS:

height: 50px
z-index: 999

Here’s the jsfiddle: http://jsfiddle.net/ncQGc/