Fixed Header


#1

On my website, I have some wrapper DIVs, and then inside those I have a pageHeader DIV and then a pageBody DIV at the same level.

I would like to freeze the page header so the user always sees my company logo and the menu bar.

For #pageHeader, I changed position: relative to position:fixed, and while that did freeze the hage header, it also moved it to the background and then overlaid the page body on top of it.

I do not want the body text to be overlaid on top of the page header, but rather, I want it to be positioned below the page header like before, but as you scroll down the page, the page header should remain in place so that if people need to access the menu it is right there.

Hope that makes sense?!


#2

My CSS knowledge is limited…

Position:fixed overrides the normal flow of starting the page at top, left 0,0.

Both divs now start at the same position.

To prevent this from happening give the container div a margin-top: 123px; where the value 123px is the height of the fixed header.


#3

Okay, a little progress…

I have a wrapper DIV and then inside it a header DIV and body DIV.

If I set the header DIV to position: fixed and then give body DIV a top-margin: 175 px it scoots things down.

However, if I scroll down the page then the text still flows over the header.

And if I do like you say and add a top margin to the container DIV, then that moves everything down which isn’t what I want.


#4

Try Googling for “CSS z-index”


#7

That does nothing.

Here is what I have tried…

#pageHeader{
position: fixed;
z-index; 1;
width: 100;
top: 0;

#pageBody{
position: relative;
z-index: 2;
width: 100%;
margin: 175px 0 0 0;
}

It looks normal until I scroll down and then the body text flows over the header.


#8

Assuming that #pageBody contains the body text it sits above the header because you have a higher z-index on it ( z-index:2; ).

Set a higher z-index on your #pageHeader

Does #pageBody even really need relative positioning and a z-index?

position:fixed elements also reference their location from the viewport


#9

Oh, I thought 1 meant #1 and on top. I get it now!

I don’t know…


#10

Try validating the CSS:

http://jigsaw.w3.org/css-validator/

and the HTML:

https://validator.w3.org/


#11

I got it in my last post by flipping the indexes around. (I thought “1” meant “top”.)

Thanks.


#12

You must have been lucky because the following CSS still fails when pasted into the CSS Jigsaw validation “by direct input” option:

/* # here is what I have tried… */

#pageHeader{
position: fixed;
z-index; 1;
width: 100;
top: 0;
}

Edit:

Added correct CSS remarks syntax.