Блог

Я создал элемент ‘header’ с элементом before-pseudo. псевдоэлемент должен находиться за родительским элементом. Все работает отлично до того момента, пока я не присвою своему «заголовку» z-индекс.

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

 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-индекс для элемента ‘header’.

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

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

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

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

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

Я использовал z-index:-1 (введите описание ссылки здесь)

 a {
    position: relative;
    z-index: 1;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: yellow;
    z-index: -1;    
}