z-index not working:

[jayg-7]

Hello,

I’m trying to get the z-index of the h2 in #text-3 to be on top of the div .left-bar.mobile-hide on this page: http://bitly.com/1KgGM0t

Right now the left bar fixed to the right page appears to be on top of it.

Any suggestions to get the bg of the “A creative design…” on top of the divs framing the page will be greatly appreciated. Thanks so much!

[Mottie]

Hi jayg-7!

The main reason this isn’t working is because the left-bar div is not in the same stacking context as the bars.

To fix it, you’ll need to do two things…

1. Add a `position:relative` to the `#text-3` section & a z-index of at least `31` (since the left-bar has a z-index of `30`).
2. Move the `<div class=”left-bar mobile-hide”></div>` to inside of the `<div class=”flexible-widgets widget-area widget-full”>…</div>`, so it is in the same stacking context.

To learn more about z-index stacking context and ordering, check out this article.

[Author]

Posts