Позиция: абсолютный элемент скрывается за более поздними элементами

Я собрал jsfiddle, чтобы проиллюстрировать мою проблему здесь. По сути, у меня есть абсолютно позиционированная система меню над моим основным контентом, но контент, кажется, плавает перед меню. Наведите указатель мыши на "Link 3", чтобы увидеть, что это просто основное содержание, которое его скрывает; меню появляются внизу, когда они достаточно длинны.

Мой навигационный заголовок выглядит примерно так:

<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>

Там довольно много CSS, все это на этой jsfiddle ссылке выше.

Ответ 1

Используйте свойство CSS z-index (уровень стекирования). Нижний индекс z означает более низкий контекст стекирования (поэтому, если два перекрывающих друг друга элементов-близнецов имеют разные z-индексы, то верхний индекс z будет отображаться сверху).

Обратите внимание, что z-index устанавливает новый контекст стекирования для каждого уровня элементов, поэтому они должны находиться на одном уровне DOM. Кроме того, z-index работает только с позиционированными элементами, поэтому он ничего не сделает, если вы не установите их в относительную, абсолютную или фиксированную позицию.

Исправлен код:

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

Дополнительная информация о z-index: http://css-tricks.com/almanac/properties/z/z-index/

Ответ 2

У вас есть position: relative; в #media-slider, если у вас нет цели использовать это свойство, удалите и будете работать.