Выпадающее меню CSS / jQuery. Z-индекс не ведет себя, как ожидалось

Question

У меня есть выпадающее меню, которое прикреплено к фиксированной панели навигации.Подобный тому, который использует текущий дизайн Twitter.

Вот ссылка на этот вопрос: http://jsfiddle.net/JDahp/3/ (Это было обновлено, чтобы быть намного более простым, чем предыдущие итерации)

Я использую jQuery, чтобы меню появлялось / исчезало, чтоработает отлично.Меню анимирует НАД панелью инструментов, а не под ней.

Я не могу понять, почему z-index не переопределяет обычную визуальную укладку для выпадающего меню?

Вот соответствующий CSSсвойства

#top-stuff{
    position:fixed;
    top:0;
    left:0;
    z-index:12;
    width:100%;
}

.dropdown {
    position: absolute;
    z-index: 1;
}

урезанная версия HTML:

<div id="top-stuff">
    <a href="" class="optionslinka">Options</a>
    <div class="dropdown" id="optionsdropdown">
        <!-- Drop down content is here -->
    </div>
</div>

Answer 1

Ваша скрипка немного сложна и занята для просмотра, но я думаю, что, вероятно, ваша проблема связана с ошибкой z-index, которая известна в IE (но затронула и другие браузеры).

По сути, если z-index не определен во всех ваших родительских контейнерах, то каждый z-index запускает новый «контекст стека», то есть они не будут перекрываться должным образом.Подумайте о 2 колодах карт, а не об одной.

Попробуйте установить position:relative;z-index:auto; для всех родительских контейнеров выше .dropdown (или любых других position:, таких как absolute и т. Д.)

Некоторые ресурсы, чтобы узнать больше:
Проблемы с выпадающим меню: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Подробное описание: http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/

Проблема, аналогичная вашей: http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

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

Answer 2

я удалил все биты z-index и просто поместил

z-index: -1; 

на этот

#optionsdropdown

, который, казалось, работал..