CSS覆盖其父级之外的其他div

Question

＆＃13;

＆＃13;

.div1{
    background:red;
    width:100%;
    height:30px;
}
.div2{
    background:green;
    width:100%;
    height:30px;
}
.div3{
    background:black;
    width:100%;
    height:50px;
   
}
.div4{
    background:yellow;
    height:30px;
    width:90%;
    margin-left:25px;
    text-align:left;
    margin-top:-10px;
    overflow:visible;
}
.div5{
    background:blue;
    color:white;
    width:100%;
    height:30px;
}

＆＃13;

<div class="div1">
    Contents of container 1
</div>
<div class="div2">
    Contents of container 2
</div>
<div class="div3">
   <div class="div4">
    Overlay
    </div>
</div>
<div class="div5">
    Content of container 5
</div>

＆＃13;

＆＃13;

＆＃13;

鉴于以下html和css，我想用div2（green颜色）覆盖div4（yellow颜色），让我们来看看。比如div2的高度的一半。如何在不使用绝对定位的情况下实现这一点，因为我有其他复杂的元素（用于页眉和页脚）。我试图通过negative top margin和overflow visible来实现这一目标，但它仍然无法正常工作。 请注意，div2和div4不是来自同一个父div。

这是HTML

 <div class="div1">
        Contents of container 1
    </div>
    <div class="div2">
        Contents of container 2
    </div>
    <div class="div3">
       <div class="div4">
        Overlay
        </div>
    </div>
    <div class="div5">
        Content of container 5
    </div>

这是CSS：

.div1{
    background:red;
    width:100%;
    height:30px;
}
.div2{
    background:green;
    width:100%;
    height:30px;
}
.div3{
    background:black;
    width:100%;
    height:50px;

}
.div4{
    background:yellow;
    height:30px;
    width:90%;
    margin-left:25px;
    text-align:left;
    margin-top:-10px;
    overflow:visible;
}
.div5{
    background:blue;
    color:white;
    width:100%;
    height:30px;
}