The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS z-index not working:

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #204251


    I’m trying to get the z-index of the h2 in #text-3 to be on top of the div on this page:

    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!


    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.