Z-индекс с псевдоэлементом

Я создал элемент 'header' с элементом before-pseudo. элемент pseudeo должен находиться за родительским элементом. Все отлично работает до момента, когда я передаю свой заголовок z-index.

Что мне нужно: желтый заголовок на переднем плане, красный псевдоэлемент в фоновом режиме и простой z-индекс 30 на желтом элементе 'header'.

header { 
    background: yellow;
    position:relative;
    height: 100px;
    width: 100px;
    z-index:30; /*This is the problem*/
}

header::before { 
    content:"Hide you behind!";
    background: red;
    position:absolute;
    height: 100px;
    width: 100px;
    top:25px;
    left:25px;
    z-index:-1;
}

Вы можете проверить мою проблему по этой ссылке (http://jsfiddle.net/tZKDy/), и вы видите проблему, когда вы устанавливаете/удаляете z-index на элементе 'header'.

Ответы

Ответ 1

Псевдоэлемент:: before находится внутри элемента заголовка.

Спецификация CSS:

Псевдоэлементы: before и: after взаимодействуют с другими блоками, как если бы они были реальными элементами, вставленными только внутри связанного с ними элемента.

Установка z-индекса для элемента заголовка создает новый Stacking Context, поэтому новый псевдоэлемент, который вы создали, не может плавать за элементом заголовка, поскольку он должны выйти за пределы Контекста Stacking.

Я предлагаю вам просто предшествовать элементу заголовка другим элементом, поэтому он стекирует правильно по умолчанию. Пример.