A problem with position: fixed;

[helpls]

Hello!

I’ve got a problem when trying to use position: fixed; for my website.

Here is my design: zd.se/newdesign/

At the moment all content added to the red div box get hidden behind the menu. How do I push down the red div box to display beneath the menu?

I’d really appreciate your help on this as I’ve got no idea what to do and if I just got this working I think I’d be on a good way on getting a real nice design together.

John

[Paulie_D]

You just need to add padding-top: 35px; to your #toppers div

The 35 px is the same height as your fixed header

[helpls]

Kind of figured it out. Had to put position: relative on #wrapper and .box and then z-index: 1; on the #header.

[helpls]

Just noticed your answer Paulie, gonna try that out as well.

[helpls]

Alright, both solutions seem to work. I’ve really never tried working with position: relative; etc as I’ve never really needed to and always tended to position my divs with margins and it worked for what I have wanted to achieve so far.

One downside I found with your solution is that the div tag is still hidden underneath the header, which means I can’t really leave some space between the header and #toppers as I intended to for visual design reasons.

Which solution do you think is best?

Edit: woops, sorry about the triple posting, didn’t notice the edit button until now.

[Paulie_D]

The z-index solution doesn’t show your ‘test’ text does it?

Hence the need for the padding-top. :)

[Paulie_D]

One downside I found with your solution is that the div tag is still hidden underneath the header, which means I can’t really leave some space between the header and #toppers as I intended to for visual design reasons.

The #toppers div is now the top element because of the fixed positioning of the header.

If you need ‘visual space’ between the header and #toppers there are a couple of things we could do.

It all depends on what the design is supposed to look like.

[helpls]

For it to display the test message I had to put top: 45px; in #toppers. Then it was pushed down below the header as I wanted.

I’m a bit frightened to use position: relative etc because I’ve never done it before so yeah, if there’s a good solution using your method instead to add some space like shown on the image below below the header that would be awesome.

http://i.imgur.com/RVvn6wH.jpg

[Paulie_D]

OK…we need to cheat here a little.

Ideally we could just add a margin-top to #toppers and that would just drop everything down by the specified amount.

However, if you do just that then the margin technically has nothing to push against and the whole thing drops down.

I know, it’s stupid but that’s the way things are.

There is a fix where you add an invisible border-top which gives the margin something to push against and it seems to work.

So…try this on #toppers.

margin: 45px auto;
border-top: 1px solid transparent;

[helpls]

Thanks. But that wouldn’t work and I kinda understand why.

I should need to create a new empty div above #toppers as for a margin to work it need to have something to push away from as you explained.

To test I tried creating this div in index.html:

Ok, I can’t figure out how to add code to this message, but basically I just added a new div tag to the html document with div style width=1px and height=1px

Sure it works, but it’s not so clean. Any better solution than creating an empty div?

[Paulie_D]

Thanks. But that wouldn’t work and I kinda understand why.

Worked when I tried it on your site before…I’ll try it again.

Oops.

The border-top should be on the #wrapper not on #toppers.

[helpls]

Alright, that worked better!

However, I noticed when scrolling down that there was now a small line (the transparent border which we added) over the fixed menu. As a result of this I decided to go with my div style option instead. It shouldn’t have any impact on the website anyways other than some CSS nerd might find it and think it’s ugly which isn’t that big of a chance or deal. :)

Thanks for all your help! Really awesome.

[Author]

Posts