Position:absolute element being hidden behind later elements

Question

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.

try taking off the `position: relative;` from `#media-slider`. works for me — Ricardo Binns, Oct 19 '12 at 20:38

score 29 · Accepted Answer · answered Oct 19 '12 at 20:43

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/

"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. — Stack Underflow, Feb 15 '18 at 21:36

score 0 · Answer 2 · answered Oct 19 '12 at 20:41

0

You have a position: relative; in the #media-slider , if you dont have a purpose to use this property, remove and will work.

answered Oct 19 '12 at 20:41

Ricardo Binns

3,228
6
44
71

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. – user1684248 Oct 19 '12 at 20:45

Position:absolute element being hidden behind later elements

2 Answers2