Z-index работает не так, как я ожидал
Итак, я получил это примерно:
<div id = "A">
<ul>
<li id = "B">foo</li>
</ul>
</div>
<div id = "C">
...
</div>
Они расположены так, что B и C перекрываются.
A имеет z-index из 90, B имеет z-index из 92, а C имеет z-index из 91. Но C появляется перед B. Что я делаю не так? (Сообщите мне, если потребуется более подробная информация.)
Спасибо, что разбили свой вопрос на простой общий случай. Это сделало ответ более поучительным. :)
Ответы 2
Использование z-index актуально только для элементов в одном контейнере. Поскольку B содержится внутри A, z-индекс B будет применяться только при разрешении других элементов внутри A. Что касается C, то и B, и A отображаются с z-index 90. Однако если C помещается внутри A, то B будет отображаться спереди.
Если у элемента нет стиля position: relative / position: absolute / position: fixed, это position: static, который является стилем позиции по умолчанию для всех элементов.
С элементом position: static, z-index просто не работает. Браузер будет отображать стек в порядке элемента xml и игнорировать свойство z-index.
Чтобы такая ситуация сработала, вам нужно добавить позицию: относительно всех трех элементов: A, B, C.
Чтобы узнать больше о z-index и наложении CSS, перейдите сюда: http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
Не могли бы вы опубликовать используемую вами таблицу стилей?