Путаница с z-index — что я упускаю?

Question

[alexiusgrey]

Я что-то запутался с z-index-ами.
Сайт верстал не я, меня попросили подправить этот момент. И некоторые другие, но вопрос с этим.

САЙТ

Есть лого с after-элементом, который создает тень. Этот афтер-элемент еще и создает под собой область, из-за которой не кликается контент, что находится под ним. Когда border прозрачный, то не понятно где это. Но вот если сделать его В ИНСПЕКТОРЕ ДЛЯ НАГЛЯДНОСТИ красным, то становится видно.


Я уже менял местами relative и absolute, чтобы самому логотипу дать relative, а афтеру абсолют, как я обычно бы сделал.
z-index афреру делал -999, а у области контента он и так 100.




НЕТ, НА КОДПЕН и в среду кода НЕ ВЫЛОЖУ, слишком много может быть того, что на таком большом сайте влияет, лучше смотреть в инспекторе.

Comments

[Василий Банников]

НЕТ, НА КОДПЕН и в среду кода НЕ ВЫЛОЖУ,

Ну значит тебе никто не поможет, тк вопрос под удаление, ибо запрещено код картинками прикладывать.
Сайт твой из россии открыть невозможно.
Модератор

[alexiusgrey]

Василий Банников, скопировать код из инспектора могу, что картинками нельзя не знал, но это плохо.
В моем случае красный цвет для визуала для наглядности хоршо как раз показать картинкой.

#header.lafka-has-header-top #logo {
    top: -8px;
    margin-bottom: 0;
    position: relative;
    left: 50%;
    margin-left: -100px;
}
div#header div#header_top div#logo:after {
    content: ''!important;
    position: absolute;
    top: 125px;
    border: 100px solid red !important;
    border-top: 30px solid #ffffff !important;
    width: 170px;
    z-index: -999;
}

[Василий Банников]

alexiusgrey,

В моем случае красный цвет для визуала для наглядности хоршо как раз показать картинкой.

Можно просто комментарием выделить)

[alexiusgrey]

Василий Банников, я же знаю людей, подумают - какой еще красный бордер? что где? Нету красного. "НИВИЖУ-досвидания", пока не ткнуть прям чем-то громным и ярким в глаза. Не буквально.

[Василий Банников]

alexiusgrey, кстати да, сейчас перечитал вопрос. Где красный бордер?

[alexiusgrey]

Василий Банников, вот нигде. И я был прав, что большие тексты никто читать не любит. Но без них тут никак. На простой вопрос "как сделать что-то" и ответ проще простого - "погугли" в лучшем случа без "ниблагадари". Или вообще отправят на htmlbook просто чтобы было..
На сайте бордер прозрачный - афтер для лого, там transparent. Но чтобы было ясно почему он мешает - его лучше в инспекторе для наглядности сделать красным, зеленым, фиолетовым или каким-то еще. Может кому-то и не легче, мне да. Для компьютеров уже подсказали pointer-events: none, а на мобильном все еще мешает хлебным крошкам нажимать по ним

[Сергей delphinpro]

alexiusgrey,

Для компьютеров уже подсказали pointer-events: none, а на мобильном все еще мешает хлебным крошкам нажимать по ним

на мобильных то же самое. Просто у ваш сайт закешировался.

PS
В следующий раз загружайте картинки на хабрасторэйдж.
Сейчас многие их видят так:

Answer 1

[Павел]

Задайте элементу с тенью
pointer-events: none

Comments

[alexiusgrey]

для компьютеров помогло, спасибо, на мобильном не знаю, или нет, или то кеш