Проблема с Z-индексом: стек дочернего элемента за родительским контейнером

Question

У меня есть ситуация, когда в родительском контейнере есть 2 ребенка. Первый ребенок занимает все содержимое родительского контейнера. Другой ребенок должен находиться ниже родительского контейнера. В настоящее время он отображается поверх родителя. Я пытаюсь уложить второй дочерний элемент за родительским контейнером.

Можно ли это сделать. Если да, то как я подхожу к решению.

Примечание: Я не могу избавиться от z-index родительского контейнера, как это модальный в этом случае

HTML

<div class="parent"> 
    <h1>Parent</h1> 
     <code>position: absolute;<br/> 
     z-index: 1;</code> 

    <div class="outer-child"> 
    <br/><br/><br/><br/><br/> 
     <h1>Outer Child</h1> 
     <code>position: relative;<br/> 
     z-index: 1;</code> 
    </div> 

    <div class="child"> 

     <h1>Child</h1> 
     <code>position: absolute;<br/> 
     z-index: -1;</code> 
    </div> 
</div> 

CSS

html { 
    padding: 20px; 
    font: 12px/20px Arial, sans-serif; 
} 

div { 
    opacity: 0.7; 
    position: relative; 
} 

.parent { 
    z-index: 1; 
    opacity: 1; 
    position: absolute; 
    top: 40px; 
    left: 100px; 
    width: 330px; 
    border: 1px dashed #900; 
    background-color: #fdd; 
    padding: 40px 20px 20px; 
    height: 200px; 
} 

.child { 
    z-index: -1; 
    position: absolute; 
    top: 10px; 
    left: 260px; 
    width: 150px; 
    height: 110px; 
    border: 1px dashed #009; 
    padding-top: 125px; 
    background-color: #ddf; 
    text-align: center; 
} 

.outer-child { 
    z-index: 1; 
    opacity: 0.8; 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 330px; 
    border: 1px dashed #900; 
    background-color: #ffc; 
    padding: 20px 10px 10px; 
    height: 200px; 
} 

JSFiddle

Answer 1

Установить родительский элемент z-index в initial

html { 
    padding: 20px; 
    font: 12px/20px Arial, sans-serif; 
} 

div { 
    opacity: 0.7; 
    position: relative; 
} 

.parent { 
    z-index: initial; 
    opacity: 1; 
    position: absolute; 
    top: 40px; 
    left: 100px; 
    width: 330px; 
    border: 1px dashed #900; 
    background-color: #fdd; 
    padding: 40px 20px 20px; 
    height: 200px; 
} 

.child { 
    z-index: -1; 
    position: absolute; 
    top: 10px; 
    left: 260px; 
    width: 150px; 
    height: 110px; 
    border: 1px dashed #009; 
    padding-top: 125px; 
    background-color: #ddf; 
    text-align: center; 
} 

https://jsfiddle.net/3269rjqh/1/

Answer 2

После того, как элемент имеет Z-индекс, он создает новую плоскость, поэтому все дочерние элементы с Z-индекс являются всегда будет «выше» (в плоскости z). Вы можете либо удалить z-index от родителя, либо перестроить свой HTML соответственно.

Answer 3

html { 
 
    padding: 20px; 
 
    font: 12px/20px Arial, sans-serif; 
 
} 
 

 
div { 
 
    opacity: 0.7; 
 
    position: relative; 
 
} 
 

 
.parent { 
 
    z-index: 1; 
 
    opacity: 1; 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 100px; 
 
    width: 330px; 
 
    border: 1px dashed #900; 
 
    background-color: #fdd; 
 
    padding: 40px 20px 20px; 
 
    height: 200px; 
 
} 
 

 
.child { 
 
    z-index: -1; 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 260px; 
 
    width: 150px; 
 
    height: 110px; 
 
    border: 1px dashed #009; 
 
    padding-top: 125px; 
 
    background-color: #ddf; 
 
    text-align: center; 
 
}

<div class="parent"> 
 
    <h1>Parent</h1> 
 
     <code>position: absolute;<br/> 
 
     z-index: 1;</code> 
 
</div> 
 
<div class="child"> 
 
     <h1>Child</h1> 
 
     <code>position: absolute;<br/> 
 
     z-index: -1;</code> 
 
</div>