无法在相对 div 上重叠位置绝对 div答案

【问题标题】：Not able to overlap position absolute div over relative div无法在相对 div 上重叠位置绝对 div
【发布时间】：2017-03-09 14:00:11
【问题描述】：

我希望我的黄色框重叠在红色框上。表示红色框的一部分应隐藏在黄色框后面。甚至黄色框的 z-index 也高于红色框。下面是jsfiddle

 <div style="width:40px;height:100px;">
<div id="relative">
    <div class="absolute">yellow</div>
</div>
<div id="relative" style="top: 54px">red</div>
</div>

#relative {
    position: relative;
    /* width: 40px; */
    height: 80px;
    background: #f00;
    z-index: 0;
    /* margin-top: 30px; */
}
.absolute {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    width: 200px;
    height: 150px;
    background: yellow;
}

JSFIDDLE

任何帮助将不胜感激。

【问题讨论】：

标签： html css-position z-index

【解决方案1】：

相对于上面 div 的绝对位置。您可以将红色 div 设为绝对值并将其显示在黄色 div 后面

<div style="width:40px;height:100px;">
    <div id="relative">
        <div class="absolute">yellow</div>
        <div style="position:absolute; top: 130px; background: #f00; height: 80px;">red</div>
    </div>    
</div>

 #relative {
        position: relative;
    }
    .absolute {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 12;
        width: 200px;
        height: 150px;
        background: yellow;
    }

【讨论】：