Max-GopheR
@Max-GopheR
Web разработчик

Как заставить отрабатывать z-index на псевдо элементе?

Всем привет. Такая проблема. Есть блок с position:relative и z-index:10 на этот же блок повесил ::after с position:absolute и z-index:5. Псевдоэлемент служит для отображения тени и вродь как по описанию z-index она должна быть под основным блоком, но так не отрабатывает и тень остается поверх блока.
Структура:
<header>
    <div class="header_wrap">
        ...
    </div>
</header>

Стили:
header {
    width:100%;
    background: url('../img/menu-bg.jpg') no-repeat;
    background-size: 105% 115%;
    background-position: center bottom;
    min-height: 134px;
    position:fixed;
    z-index: 5;
}
header .header_wrap {
    min-height: 134px;
    position:relative;
    z-index:10;
}
header .header_wrap::after {
    content: "";
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-35%;
    display:block;
    width:70%;
    border-radius:40%;
    height:20px;
    box-shadow: 0px 0px 30px #000000;
    z-index: 5;
}
  • Вопрос задан
  • 365 просмотров
Пригласить эксперта
Ответы на вопрос 2
thewind
@thewind
php программист, front / backend developer
z-index применяется для элементов на одном уровне, а вы пытаетесь применить его к родителю и наследнику. Так не сработает.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы