Как убрать тень между элементами?

[Launder]

http://jsfiddle.net/tr0zurq1/

 

Предполагается, что тень будет именно для каждого элемента: либо для <li>, либо для <a>, а не для <ul>.

По-идее, между элементами тень не должна быть видна, поскольку, z-index псевдоэлемента, для которого сделана тень, меньше z-index'a элемента, для которого сделан псевдоэлемент.

Но тень всё равно есть. Почему? Как расположить тень "дальше" пунктов меню?

<ul>	<li><a href="#">Борщ украинский с пампушками</a></li>	<li><a href="#">Вареники с печенью в луке с салом</a></li>	<li><a href="#">Курица, тушенная с галушками</a></li></ul>

ul     {	position: absolute;	list-style: none;	margin: 0; padding: 0;	word-wrap: break-word; /*перенос слов*/        z-index: 0;     }ul a     {	display: block;	        position: relative;        z-index: 1;        background: #ffe5e5;        color: #ca575b;		padding: 5px 10px;        text-decoration: none;     }ul a:hover     {	background: #8bc6ee; 	color: #fffcfc; 		     }ul a::after     {       content: '';       display: block;       position: absolute;       top: 0; bottom: 0; left:0; right:0;       box-shadow: 0 0 4px #dd9a9a;       z-index: -1;           }

Edited December 11, 2015 by Launder

[ученик]

http://jsfiddle.net/tr0zurq1/2/ 

ul a::after     {       content: '';       display: block;       position: absolute;       top: 0; bottom: 0; left:0; right:0;       box-shadow: 0 0 4px #dd9a9a;       z-index: -1;           }

box-shadow для ::after

 

вёрстка ни верная

[Sensei]

Если у элемента позиционирование отличное от static и задан z-index, формируется новый контекст наложения, в котором этот элемент будет корневым.
Контекст, как стакан, дном которого служит корневой элемент, а все дочерние элементы располагаются внутри этого стакана в определенном порядке.
Элементы даже с отрицательным z-index не могут быть расположены за корневым элементом, и лежат на самом дне стакана.

В общем, нужно убрать у ссылок z-index

ul a {   z-index: auto;}

[Launder]

Спасибо за столь наглядное объяснение, идея более-менее ясна: если элемент лежит внутри стекового контекста, он не может быть "ниже" родителя (корня стекового контекста), даже если у него z-index: -1000000;

Когда я назначаю свойство z-index: auto для <a>, то я вывожу <a> из стекового контекста, который я задал назначив z-index: 0 для моего списка <ul>.

Соответственно, тень между пунктами меню исчезает, поскольку <ul> перестаёт быть для неё элементом формирующим стековый контекст, а значит её элементы перекрывают тень, которая, имея свойство z-index: -1, скрывается за элементами <ul>, z-index которых равен нулю.

 

http://jsfiddle.net/Launder/tr0zurq1/3/

 

Но тогда почему тень от псевдоэлемента <a> должна быть меньше нуля, даже если я для <ul> назначил z-index: 1?

 

http://jsfiddle.net/Launder/tr0zurq1/4/

 

я закомментировал 31 строку, в котором задано свойство z-index для псевдоэлемента и тень между элементами <li> появилась снова. Более того, если я введу вручную z-index: 0 то тень между элементами никуда не исчезнет.

Вот я задал, с Вашей помощью, для элемента ul a свойство z-index: auto; Тем самым, как я понял, я вывел <a> из стекового контекста <ul>. Поскольку я задал для ul z-index равным единице, то, если считать z-index <a> равным нулю, по-идее, <a> вообще не должно выделяться, но оно выделяется. Значит z-index <a> должен быть не меньше единицы. По какому принципу назначается значение z-index: auto? Это первый вопрос.

И второй: если я задаю для псевдоэлемента, содержащего тень, z-index: 0, что явно меньше единицы, почему тогда тень между элментами отображается? Почему нужно именно отрицательное значение?

Значит я как-то не правильно понимаю логику. Не могли бы Вы её объяснить на этом конкретном примере?

[Igor Schnaider]

Когда я назначаю свойство z-index: auto для <a>, то я вывожу <a> из стекового контекста, который я задал назначив z-index: 0 для моего списка <ul>.

 

Значение z-index, отличное от auto, создает новый контекст укладки. Поэтому неверно: элемент UL со свойством z-index: 0 по-прежнему создает этот контекст. А вот элемент A теперь никак не повлияет на свои псевдоэлементы, они будут укладываться относительно UL. А тень в данном случае "исчезает" просто потому, что фон установлен на A (попробуйте убрать background-color у элемента A на UL).

 

Но тогда почему тень от псевдоэлемента должна быть меньше нуля, даже если я для назначил z-index: 1?

 

Порядок укладки внутри одного контекста следующий:

• корневой элемент;
• позиционированный (со своими потомками) с отрицательным значением z-index;
• не позиционированные элементы (появляются в том порядке, как определены в DOM);
• позиционированные (и потомки) с z-index: auto;
• позиционированные (и потомки) с положительным значением z-index.

То есть в данном случае получается, если вы поставите не отрицательное значение, то тень будет выше предыдущего в DOM'е элемента A, фон которого перекрывал до этого box-shadow.

 

 

По какому принципу назначается значение z-index: auto

 

Это значение по умолчанию.

Edited December 13, 2015 by Igor Schnaider

[Launder]

А вот элемент A теперь никак не повлияет на свои псевдоэлементы, они будут укладываться относительно UL.

 

 

Вот оно что. Ну тогда более-менее ясно. Иными словами если бы у <a> было любое количество потомков, то они все бы были укладывались относительно <ul>, поскольку у <a> нет условий для создания своего стекового контекста.

Я про это свойство читал вот тут:

 

http://resources.webknowledge.ru/digests/css/property/z-index/

 

но про наследование, видимо, до конца не понял.

 

Кстати, если мы назначим <a> свойство overflow: hidden, то тень исчезнет, какой бы у неё не был z-index, ну, конечно, если тень не направлена внутрь. Это пожалуй, немного про другое, но я как-то долго не мог понять, куда исчезает мой псевдоэлемент, когда он выходит за границы родительского элемента, и искал где я нахимичил с z-index, а дело оказалось в overflow.

 

 

 

По какому принципу назначается значение z-index: auto

 

Это значение по умолчанию.

 

 

А оно всегда численно равно нулю?

Edited December 13, 2015 by Launder

[Igor Schnaider]

А оно всегда численно равно нулю?

auto и 0 - не совсем одно и то же. Позиционированный элемент с установленным значением свойства z-index, отличным от auto, создает новый контекст наложения. По умолчанию - с auto - не создает.

 

upd. Неправильно понял сначала вопрос. Численно да, он равен нулю.

Edited December 14, 2015 by Igor Schnaider

[Launder]

Видимо всё же, понял не до конца...

 

https://jsfiddle.net/Launder/q7vd9ghv/4/

 

У меня у <ul> (выпадающий список), z-index: 1; для его псевдоэлемента: z-index: auto; То есть, у него должен быть корневой контекст наложения и z-index должен быть численно равен нулю. Почему же <ul>, имеющий свой собственный фон и бОльший z-index, не перекрывает тень от псевдоэлемента?

Кстати, интересно как выделяется пункт меню <a> - фон меняется, но через фон, тень всё равно видна. Вроде фон не прозрачный.

Объясните, пожалуйста, данное явление...

[Igor Schnaider]

.menu > li:hover > ul {    position: absolute; /* ранее определено */    z-index: 1;    display: block;}

Это значит, что ul создает контекст форматирования и псевдоэлемент позиционируется по z-оси уже относительно него.

 

UPD:

По второму вопросу. Это определено порядком отрисовки. Позиционированные потомки с z-index: auto или 0 будут выше, чем текст. Но ниже, если z-index меньше 0.

 

То есть, можно так написать:

 

    .menu ul::before {

        /* ... */

        z-index: -1;

    }

 

Тогда фон будет перекрывать его.

Edited January 8, 2016 by Igor Schnaider

[Launder]

Если честно, всё равно пока до конца не ясно. Поигрался немного с z-index результата не получил, помедетирую ещё позже...

 

Вот так работает, вроде, вполне себе не плохо:

 

https://jsfiddle.net/Launder/tmnnyo0L/4/

 

Постарался все сложные моменты в коде прокомментировать.

Если кому интересна тригонометрия, то её можно посмотреть тут:

 

http://htmlforum.ru/index.php?showtopic=49661#entry368125

 

ну и листик с карандашом Вам в помощь

Кому нужен треугольничек, чтобы поиграться, вот заготовка:

 

https://jsfiddle.net/Launder/2kzjq5em/1/

[Launder]

.menu > li:hover > ul {    position: absolute; /* ранее определено */    z-index: 1;    display: block;}

Это значит, что ul создает контекст форматирования и псевдоэлемент позиционируется по z-оси уже относительно него.

 

Ну так я же отменил это для псевдоэлемента, через указание ему z-index: auto, почему не сработало, не пойму?

Edited January 14, 2016 by Launder

[Igor Schnaider]

Ну так я же отменил это для псевдоэлемента, через указание ему z-index: auto, почему не сработало, не пойму?

 

Еще раз, контекст позиционирование установлен на UL. Значит, псевдоэлемент располагается по z-оси относительно него, поэтому он никак не может быть под фоном списка.

 

Чтобы сделать, как вы хотите, нужно убрать этот контекст от UL. То есть, уберите z-index с UL, а для псевдоэлемента поставьте отрицательное значение z-index.

[Launder]

@Igor Schnaider, и, продолжая Вашу мысль, z-index следует выставить не для UL, а для .menu li - для того, чтоб он формировал свой контекст форматирования и был выше строчных элементов.

 

https://jsfiddle.net/Launder/q7vd9ghv/5/

 

Тогда и ul и его псевдоэлемент располагается в ОДНОМ контексте наложения и их взаимодействие может быть отрегулировано с помощью численного указания z-index (по-умолчанию они равны нулю, а сверху располагается то, что идёт в коде ниже). Если же ul формирует новый контекст наложения - то все его потомки, будут выше него.

Я почему-то понял сначала что z-index: auto выводит элемент из стекового контекста его предка, а, похоже, это не так. Если уж оказался в стековом контексте, то всё, приплыли

 

В общем с логикой z-index'a более-менее разобрались, осталось этот пример причесать, чтоб он был такой же как и сделанный немного другим способом:

 

https://jsfiddle.net...der/tmnnyo0L/4/

[Launder]

Кстати, в этом моём примере: https://jsfiddle.net...der/tmnnyo0L/4/ для элемента:

.menu > li:hover::after {z-index: 1;}

но даже если его убрать - ничего не изменится.

Почему?

Ведь псевдоэлемент имеет такое же позиционирование как и

.menu ul {position: absolute;}

так почему же псевдоэлемент, по-умолчанию, перекрывает .menu ul?

Получается псевдоэлемент, по-умолчанию, распологается в коде ниже?

Поменял два псевдоэлемента местами, назначил ::before -> ::after и наоборот, ничего не изменилось.

[Launder]

https://jsfiddle.net/Launder/q7vd9ghv/6/

 

А вот и второй вариант решения той же задачи.

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

Интересно, какой вариант более концептуально правильный