Блок поверх других

[aronsky]

Делаю выпадающее меню. Структура такая:

Код HTML:

<div class="top_container">
<div class="menu">
   <ul class="nav_menu">
      <li>Item1</li>
      <li>Item2</li>
      <li>ItemN</li>
   </ul>
</div>
<div class="mask">
</div>
</div>

<div class="main_container">
</div>

Мне надо, чтоб элементы из ul выводились поверх всего, в т.ч. и блока "main_container".

В таблице стилей у меня прописано

Код:

ul.nav_menu {
position: absolute;
overflow: visible;
disaply: block;
z-index: 1000;
}

.mask {
position: absolute;
disaply: block;
z-index: 500;
}

.main_container {
position: absolute;
disaply: block;
z-index: 2;
}

Проблема в том, что блок ul отображается всегда под блоком main_container. Над блоком mask он отображается только при установке z-index для mask меньше 2.

Добавляю исходник с примером.

Буду благодарен за любую помощь.

[bob_24]

качать врядли кто будет, для этого есть jsfiddle.net/

что за странное св-во disaply )

а вообще у вас все работает http://jsfiddle.net/93xHH/

Edited January 29, 2012 by bob_24

[sammasati]

Нужно назначить z-index для блока menu. У всех остальных блоков его можно убрать.

[aronsky]

качать врядли кто будет, для этого есть jsfiddle.net/

что за странное св-во disaply )

а вообще у вас все работает http://jsfiddle.net/93xHH/

Вот-вот: код из примера работает, а когда верстаю страницу - получается не то.

Залил мой код на jsfiddle: http://jsfiddle.net/aronsky/rRw9x/22/

Простите за цвета - они выбраны для наглядности.

В коде можно увидеть 7 блоков li с анкором testimonials, в то время, как отображается всего 5.

Edited January 29, 2012 by aronsky

[sammasati]

Меню обрезается из-за "overflow: hidden" у top-container и top-wrap.

[bob_24]

Для ul.navmenu задай z-index больше чем у .bottom-mask

[aronsky]

Меню обрезается из-за "overflow: hidden" у top-container и top-wrap.

Поменял на visible. Появляется над бэкграундом блоков, но под их текстом.

Для ul.navmenu задай z-index больше чем у .bottom-mask

Я, наверное, что-то не понимаю. Я поставил для .bottom-mask 20, для ul.navmenu 50 и даже для каждого вложенного элемента добавил z-index (не смотря на то, что он наследуется). Посмотрите, что получается:

http://jsfiddle.net/rRw9x/28/

[bob_24]

http://jsfiddle.net/rRw9x/29/

[aronsky]

http://jsfiddle.net/rRw9x/29/

Спасибо! Это оно. Получается, что проблема была из-за того, что контейнеру .top-wrap был присвоен z-index: 2? Но я же присваивал потом внутренним элементам большее значение.

Получается, что z-index тоже размещает элемент выше другого элемента только в том случае, если родительский контейнер не находится ниже него? Или как объяснить это явление? В справочнике ничего про такие свойства z-index не сказано.