Как разместить дочерний div за родительским div?

Question

Мой вопрос точно так же, как предмет говорит, я пробовал ниже, но он не работает.

Мой HTML

<div id="parent"> 
    <div id="children"></div> 
</div> 

Мой CSS

#parent { 
    position:relative; 
    z-index: 2; 
    width: 200px; 
    height: 200px; 
    background: green; 
} 
#children { 
    position: absolute; 
    z-index: 1; 
    width: 100px; 
    height: 100px; 
    background: blue; 
} 

Answer 1

Omit родительского элемента z-index, а затем дать ребенку отрицательное z-index значение.

При этом вы фактически удаляете stacking context, который ранее был установлен между элементами.

Example Here

#parent { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background: green; 
} 
#children { 
    position: absolute; 
    z-index: -1; 
    width: 100px; 
    height: 100px; 
    background: blue; 
} 

Answer 2

Вы можете удалить Z-индекс в целом и добавить переполнение: скрытый родителю, а затем переместить ребенка из пути путем изменения верхнего или маржи-топ свойство быть -100px ,

#parent { 
 
    position:relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: green; 
 
    overflow:auto; 
 
} 
 
#children { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
    top:-100px; 
 
}

<div id="parent"> 
 
    <div id="children">child</div> 
 
</div>