Html 子div后面的容器div背景

在本页上：

我在“footer”div中添加了一个“footer wrap”div（在Wordpress主题的footer.php中）。然后在CSS中，我在“footer wrap”div中添加了一个背景图像。问题是：它一直显示在“footer”div的背景色下面。我尝试为两个div添加“position:relative”和“z-index”值，但没有成功

这就是我想要达到的结果：

我做错了什么

我的CSS：

.footer-wrap {
    padding-top: 19px;
    background: url("../style/img/golfjes.png") repeat-x top left;
    clear: both;
    position: relative;
    z-index: 5;
}

.footer { 
    width: 100%; 
    padding: 65px 0 31px;
    border-bottom: 4px solid #C71A4E;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: relative;
    z-index: 1;
}

非常感谢你！

---

Stefaan

您应该将功能区放在页脚中，而不是环绕它，然后将其放置在顶部减去几个像素。因为页脚在包裹中，并且有背景色，所以它与背景重叠

因此，您需要的是：

 <footer div with background color>
     <ribbon div positioned a bit top minus>
     </ribbon div>
       <footer content>
       </footer content>
 </footer div>