html – 在Child的Parent之上且在另一个对象之上的对象之上的Child

2023年11月11日 207次阅读

我希望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>

最佳答案 您可以通过删除z-index来实现此目的：1;来自#parent div.

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