html - CSS 在另一个 div 之上有 div？

Question

我不确定如何提出我的问题。如果您访问此站点:http://powellgroupconstruction.com/我试图让我的内容类的底部超过我的页脚，就像这个示例图像中一样。

这是我的 HTML:

<div class="wrapper">

    <div class="content">

    </div><!--content-->

</div><!--wrapper-->

<div class="footer">


</div><!--footer-->

和我的 CSS

.wrapper{
    background-color:#FFF;
}

.content{

    background-color:#FFF;
    width:1027px;
    min-height:300px;
    margin:0 auto;
    box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
    border-bottom-left-radius:2em;
    border-bottom-right-radius:2em;
}

.footer{
    background-color:#000;
    height:500px;
}

如有任何帮助，我们将不胜感激。

Answer 1

您只需将内容设置为相对定位并提升 z-index。 此时您的内容位于页脚上方。

但是现在要将页脚推到后面，您需要添加一个 margin-top -100px ，因为您已经在 css 中定义了高度。

试试这个 CSS 代码。 (这项工作):

.wrapper{
    background-color:#FFF;
}

.content{

    background-color:#FFF;
    width:1027px;
    min-height:300px;
    margin:0 auto;
    box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
    border-bottom-left-radius:2em;
    border-bottom-right-radius:2em;

    position:relative;
    z-index:999999;
}

.footer{
    background-color:#000;
    height:500px;

    margin-top:-100px
}