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

Question

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

Cookie

JSFIDDLE

任何帮助都将受到高度赞赏。

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