Question

在此页面上：http://www.chronicallyhappy.nl/

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

这是我想要达到的结果：http://nl.tinypic.com/r/2hhdcwn/8

我做错了什么？

我的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;
}

非常感谢你！斯特凡

Answer 1

你应该将色带放在页脚中，而不是将其包裹起来，并将其放在顶部减去几个像素。由于您在页面中有页脚，并且它具有背景颜色，因此它与其bg重叠。

所以你需要的是：

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

在儿童div后的容器div背景

1 个答案: