在Child的Parent之上且在其他对象之上的对象之上的子

Question

我希望#under_child_above_parent下的div #child位于#parent之上且#under_all之上。这种HTML格式可以实现吗？因为我需要将它格式化为这样，因为更容易在儿童中定位复杂的东西。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过从z-index:1; div。

中移除#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>