Position:absolute element being hidden behind later elements

51,563

Use the z-index CSS property (stacking level). Lower z-index means lower stacking context (so if two overlapping sibling elements have different z-indices, the one with the higher z-index will display on top).

Note that z-index establishes a new stacking context for each level of elements so they need to be on the same level of the DOM. Also, z-index only works on positioned elements so it won't do anything unless you set them to relative, absolute or fixed position.

Fixed your code:

#nav-header {
    width: 940px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
#upper-section {
    height: 300px;
    font-size: 0;
    position: relative;
    z-index: 1;
}

More z-index info: http://css-tricks.com/almanac/properties/z/z-index/

Share:
51,563

Related videos on Youtube

user1684248
Author by

user1684248

Updated on October 20, 2020

Comments

  • user1684248
    user1684248 over 3 years

    I've put together a jsfiddle to illustrate my problem here. Essentially, I've got an absolutely-positioned menu system above my main content, but the content seems to be floating in front of the menus. Hover over "Link 3" to see that it's just the main content that's hiding it; the menus show up below when they're long enough.

    My nav-header looks something like this:

    <div id='nav-header'>
        <div class='nav-bar'>
            <div class='nav-item '>
                <a class='link-3' href='#'>
                    <div class='nav-text-container'><p>Link 3</p></div>
                </a>
                <div class='flydown-container link-3'>
                    <div class='flydown'>
                        <div class='header'>Heading 1</div>
                        <ul>
                            <li><a class='secondary-menu-link' href='#'><span>Sub-link 1</span></a></li>
                            <li><a class='secondary-menu-link' href='#'><span>Sub-link 2</span></a></li>
                            <li><a class='secondary-menu-link' href='#'><span>Sub-link 3</span></a></li>
                            <li><a class='secondary-menu-link' href='#'><span>Sub-link 4</span></a></li>
                            <li><a class='secondary-menu-link' href='#'><span>Sub-link 5</span></a></li>
                        </ul>
                        <div class='header'>Heading 2</div>
                        <ul>
                            <li><a class='secondary-menu-link' href='#'><span>Sub-link 1</span></a></li>
                            <li><a class='secondary-menu-link' href='#'><span>Sub-link 2</span></a></li>
                            <li><a class='secondary-menu-link' href='#'><span>Sub-link 3</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    There's quite a bit of CSS, it's all at that jsfiddle link above.

    • Ricardo Binns
      Ricardo Binns over 11 years
      try taking off the position: relative; from #media-slider. works for me
    • bookcasey
      bookcasey over 11 years
      @RicardoArruda Add that as an answer.
  • user1684248
    user1684248 over 11 years
    Not quite. It appears to work, but adding a style of background-color: blue; to .media-container reveals that the menu is still being hidden.
  • Stack Underflow
    Stack Underflow over 6 years
    "Also, z-index only works on positioned elements so it won't do anything unless you set them to relative, absolute or fixed position." Yes!! Sweet action! This was the culprit.