Позиционирование ребенка за родителей

Question

Я пытаюсь поместить дочерний элемент за его родителей:

<div><p>test</p></div> 

Мой CSS является:

div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    z-index: 2; 
} 

div p { 
    position: relative; 
    z-index: 1; 
} 

z-index из <p> ниже, чем это родитель z-index, но он отображается спереди. Почему это?

Answer 1

Если это возможно в вашей ситуации, вам необходимо предотвратить стекирование контекста родителя. Для этого, удалите z-index из вашего <div/> и установить <p/> «s z-index к -1:

div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    /* z-index: 2; */ 
} 

div p { 
    position: relative; 
    z-index: -1; 
} 

Answer 2

div и p в примере существуют на разных контекстах штабеля, а div» s z-index говорит его появляются на два уровня выше, чем его братья и сестры, а не его дети.

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

Предоставление pz-index -1 ставит p за div, независимо от div «s z-index.