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

Имам елемент, в този случай li и съм го позиционирал относително и след това имам псевдо елемент :after от него. Има съдържание "", позиционирано абсолютно, има позиция и размери и сянка на полето. Зададох неговия z-index на -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-индекс (освен в FF2, очевидно). Ако възнамерявате псевдоелементът да се показва зад li, елементът, който е предшественик на li, трябва да създаде контекст на подреждане.

Сега един елемент създава контекст на подреждане само ако едно от следните условия е вярно (взето от MDN):

  • елементът е основният елемент (HTML),
  • той е позициониран (абсолютно или относително) със стойност на z-индекс, различна от "auto",
  • има стойност на непрозрачност, по-малка от 1. (Вижте спецификацията за непрозрачност)

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

person Asad Saeeduddin    schedule 06.06.2013
comment
Благодаря. Разбрано и напълно логично! - person rctneil; 06.06.2013