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

Question

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

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

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'.

Answer 1

Псевдоэлемент :: before помещается внутри элемента header.

CSS Spec :

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

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

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