Question

我不知道如何提出我的问题。如果你去这个网站：http://powellgroupconstruction.com/我试图让我的内容类的底部超过我的页脚，就像在这个示例图像中。 enter image description here

这是我的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
}

Answer 2

使用 z-index 属性高于页脚

.wrapper{
    background-color:#FFF;
}

.content{
    z-index:100;
    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;
    margin-bottom: -100px;
}

.footer{
    z-index:1;
    background-color:#000;
    height:500px;
}
.wrapper,.footer,.content{
    position:relative;
}

还将位置设置为相对于处理z-index属性。有关更多详细信息和示例，请访问css-tricks.com。还将margin-bottom设置为负值以在页脚上方溢出

Answer 3

你需要调整边距...使页脚有一个负的上边距或者包装有一个负底边距...哦，并给包装稍微提高z-index ...

.footer {
    margin-top: -100px;
}
.wrapper {
    position: relative;
    z-index: 1;
}

OR

.wrapper {
    margin-bottom: -100px;
    position: relative;
    z-index: 1;
}

我个人更喜欢第一个......

Answer 4

你遇到的问题是包装器有背景颜色。 z-index只适用于兄弟姐妹，所以你可以这样做：从.wrapper中删除background-color: #fff;（否则.wrapper颜色会阻止页脚显示重叠的位置），或者在.wrapper中移动.footer 。然后添加以下内容：

.footer {
    position: absolute;
    top: 250px;
    z-index: -1;
    width: 100%;
}

这是一个有效的 Demo

Answer 5

您可以使用z-index属性并在div

中说position : absolute来获得结果

.content{
    z-index:1000;
     position : absolute
    .........
}

.footer
{
  z-index:0;
  position : absolute
}

Answer 6

只需使用以下css规则

.content {
    background-color: #FFFFFF;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
    bottom: -90px;
    box-shadow: 12px 0 15px -4px #888888, -12px 0 8px -4px #888888;
    margin: 0 auto;
    min-height: 300px;
    position: relative;
    width: 1027px;
    height: 570px;
    z-index: 1000;
}
.footer {
    background-color: #000000;
    height: 500px;
    margin: 0 auto;
    position: relative;
}

enter image description here

CSS有另一个div的顶部？

6 个答案: