Z-индекс CSS: -1

У меня есть элемент, в данном случае li, и я расположил его относительно, а затем получил от него псевдоэлемент :after. Он имеет содержимое "", абсолютно позиционированное, имеет позицию, размеры и тень блока. Я установил для его z-индекса значение -1, и проблема в том, что он снова становится самым нижним элементом с z-индексом на моей странице. Я ожидаю, что он опустится на 1 место, чтобы быть сразу за li.

Я следую этому: http://nicolasgallagher.com/css-drop-shadows-without-images/

Любые идеи? Если я установлю z-индекс псевдо-индекса равным 1, тогда он прыгнет впереди li, я просто хочу, чтобы вместо этого он находился на одну остановку позади него.


css z-index position pseudo-element
person rctneil    schedule 06.06.2013    source источник
comment
Не могли бы вы посмотреть, что произойдет, если вы примените свойство z-index:1 к li?   -  person Asad Saeeduddin    schedule 06.06.2013
comment
При этом псевдоэлемент прыгает поверх li. Я просто удалю все стили и посмотрю, не мешает ли что-нибудь на сайте. Доложит. Только что попробовал упрощенный случай на Codepen, и все в порядке: cdpn.io/Kinvj, так что это не невозможно. проблема   -  person rctneil    schedule 06.06.2013
comment
Это ожидаемое поведение. Я объясню в ответ.   -  person Asad Saeeduddin    schedule 06.06.2013
comment
Нашел проблему, мне нужно z-index: 1; на моем общем элементе .container. Отлично решает.   -  person rctneil    schedule 06.06.2013
comment
Пересмотрел мой ответ: очевидно, использование -1 не означает, что элемент отображается за тем, относительно чего он складывается. Вы можете изменить z-индекс псевдо на 0 и z-индекс li на 1, и все равно увидите те же результаты.   -  person Asad Saeeduddin    schedule 06.06.2013

Ответы (1)


arrow_upward
2
arrow_downward

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

Теперь элемент создает контекст стека, только если выполняется одно из следующих условий (взято из MDN):

  • элемент является корневым (HTML),
  • он позиционируется (абсолютно или относительно) со значением z-index, отличным от "auto",
  • он имеет значение непрозрачности меньше 1. (См. спецификацию непрозрачности)

Как вы могли заметить, явное указание значения свойства z-index контейнера li (отличного от "auto") решает проблему. Это связано с тем, что теперь контейнер создает свой собственный контекст стека, и все потомки, для которых он является ближайшим контекстом стека, будут упорядочены в соответствии с их z-index значениями относительно контейнера.

person Asad Saeeduddin    schedule 06.06.2013
comment
Спасибо. Понятно и понятно! - person rctneil; 06.06.2013