html - Child above object 是 Child's Parent 和 other object 之上的对象

Question

我想要 div #under_child_above_parent 在 #child 之下但在 #parent 之上和在 #under_all 之上。这种 HTML 格式可能吗？因为我需要将它格式化为这样的格式，因为这样更容易在 child 中定位复杂的东西。

#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

您可以通过从 #parent div 中删除 z-index:1; 来实现这一点。

#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>