Ребенок над объектом, который находится над родителем ребенка и над другим объектом

Question

Я хочу, чтобы div #under_child_above_parent под #child, но выше #parent и выше #under_all. Это возможно с этим форматированием HTML? Потому что мне нужно, чтобы оно отформатировалось именно так из-за более легкого позиционирования сложной вещи внутри ребенка.

#under_all { 
 
    width:100%; 
 
    height:100px; 
 
    background-color:blue; 
 
    z-index:2; 
 
} 
 

 
#under_child_above_parent { 
 
    width:100%; 
 
    height:50px; 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    color:white; 
 
    background-color:red; 
 
    z-index:3; 
 
} 
 

 
.objectwithinobject { 
 
    width:50%; 
 
    height:50%; 
 
    position:absolute; 
 
    left:25%; 
 
    top:100; 
 
} 
 

 
#parent { 
 
    background-color:green; 
 
    z-index:1; 
 
} 
 

 
#child { 
 
    background-color:grey; 
 
    color:yellow; 
 
    z-index:4; 
 
}

<div id="under_all"> 
 
</div> 
 
<div id="under_child_above_parent"> 
 
    Has to go above #under_all (blue), under#parent (green) and under #child (grey). 
 
</div> 
 
<div id="parent" class="objectwithinobject"> 
 
    <div id="child" class="objectwithinobject"> 
 
    </div> 
 
</div>

Answer 1

Вы могли бы добиться этого путем удаления z-index:1; из #parent дел.

#under_all { 
 
    width:100%; 
 
    height:100px; 
 
    background-color:blue; 
 
    z-index:2; 
 
} 
 

 
#under_child_above_parent { 
 
    width:100%; 
 
    height:50px; 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    color:white; 
 
    background-color:red; 
 
    z-index:3; 
 
} 
 

 
.objectwithinobject { 
 
    width:50%; 
 
    height:50%; 
 
    position:absolute; 
 
    left:25%; 
 
    top:0px; 
 
} 
 

 
#parent { 
 
    background-color:green; 
 
} 
 

 
#child { 
 
    background-color:grey; 
 
    color:yellow; 
 
    z-index:4; 
 
}

<div id="under_all"> 
 
</div> 
 
<div id="under_child_above_parent"> 
 
    Has to go above #under_all (blue), under#parent (green) and under #child (grey). 
 
</div> 
 
<div id="parent" class="objectwithinobject"> 
 
    <div id="child" class="objectwithinobject"> 
 
    </div> 
 
</div>