CSS Sidebar with Postion Relative and Z-Index Set

Question

I have sidebar on the left hand side of my webpage that is set to postion:relative with a top value set but it also has a z-index of 10 as the top part of the sidebar needs to overlap a portion of the content at the right that is also set to relative.

I then have my footer with no position set, but has a clear:both set, that sits underneath the sidebar, as the height of the sidebar is larger the my content div.

My question is, as the sidebar grows, it doesn't push the footer down with it but rather is rendered over the top of it - any ideas what I am missing?

Is it because my sidebar has a z-index of 10 - if so, how would I get it to push the footer down instead of rendering over the top of it?

If not, then what could it be?

Answer 1

Not sure if this would work, but what happens if you set the same z-index for the sidebar and the footer?

Answer 2

Mmh z-index, positioned elements and stacking context are so fun :(
Here are good resources about z-index:

• Teach yourself how elements stack (renamed in How z-index works!)
• Understanding CSS z-index (MDC)

The first one will let you find the solution by yourself, even if it's by trial and error.

Answer 3

Kill the top declaration for your #sidebar and figure out a different way of having that top space ( margin, padding )

If that doesn't work, please link us to code.