Z-индекс не ведет себя так, как я ожидал

Question

так что я получил это примерно:

<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. Что я делаю не так? (Дайте мне знать, если нужно больше подробностей.)

Answer 1

Использование z-index относится только к элементам в одном контейнере. Поскольку B содержится внутри A, z-индекс B будет применяться только при разрешении других элементов внутри A. Что касается C, то и B, и A отображаются в z-index 90. Однако если C помещается внутри A, то B окажет впереди.

Answer 2

Если элемент не имеет позиции: относительная / позиция: абсолютная / позиция: фиксированный стиль, его позиция: статическая, которая является стилем позиции по умолчанию для всех элементов.

С элементом position: static, z-index просто не работает. Браузер отобразит стек в порядке элемента xml и проигнорирует свойство z-index.

Чтобы подобная ситуация работала, вы должны добавить положение: относительно всех 3 элементов, A, B, C.

Чтобы узнать больше о z-index и CSS-укладке, перейдите по ссылке: http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp