Forums

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
    Posts
  • #204251
    jayg-7
    Participant

    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!

    #204265
    Mottie
    Member

    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.