Глубина (Z-индекс) кошмар

Question

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

Внутри есть основной div обтекания ( root ) и два div обтекания ( wrap1 и wrap2 ). Проблема здесь в том, что мне нужно, чтобы содержимое wrap2 ( highlight ) было позади содержимого wrap1 ( text ), но перед фоном корень .

Это, однако, должно не изменить:

• HTML, элементы и обертки должны быть оставлены нетронутыми. Без учета порядка wrap1 и wrap2 внутри root .

• Подсветка div должна сохранять абсолютное позиционирование.

• Стиль выделение с background-color не вариант, наличие выделение является обязательным.

PS: курсив ссылается на идентификаторы <div> s в примере скрипты, для тех, кому было лень его посетить.

Answer 1

Мне удалось отобразить текст перед выделением с помощью , добавив z-index к тексту . (Добавление z-index к wrap1 также работает.) Хитрость заключается в том, что нужно помнить, что z-index не применяется к статически расположенным элементам, поэтому вам нужно дать тот же div * position: relative.

#text {
    position: relative;
    z-index: 1000;
}

(Большой z-index, потому что IE укусил меня за то, что в прошлом я не уважал низкие значения. Может или не может быть проблемой.; -)

Answer 2

Z-индекс может быть трудно понять. Я думаю, что кто-то уже ответил на ваш вопрос, но если вы хотите узнать больше о том, как они работают, это довольно всеобъемлющее руководство:

http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/

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

http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

Answer 3

#wrap1{position:absolute;z-index:2;}