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

Question

[Максим Литвинов]

Всем привет. Такая проблема. Есть блок с 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;
}

Comments

[qpPeW]

Не совсем понятно что Вы хотите получить на выходе с данным кодом.

Answer 1

[Дмитрий]

z-index применяется для элементов на одном уровне, а вы пытаетесь применить его к родителю и наследнику. Так не сработает.

Comments

[Максим Литвинов]

Дмитрий, не совсем понял. Сколько смотрел мануалов по теням там есть элемент и псевдоэлемент. И при такой структуре все срабатывает и псевдоэлемент получается под элементом. Можете немного подробнее объяснить?

[cssfish]

если у элемента есть z-index, то вложенные в него элементы не могут быть ниже его (по z-оси).

Answer 2

[tyzberd]

https://jsfiddle.net/f0ypa8a4/