Question

我正在努力处理一些简单的（！）代码。我设法有一个水平拉伸的背景，我对齐到页面的底部，但应该在它上面的内容DIV隐藏在DIV背景下。

我的CSS代码是：

.background {
    width: 100%;
    height: 1630px;
    background: url(bkg.jpg) bottom center no-repeat;
    background-size: contain;
    position: fixed;
}
.postcard {
    width: 700px;
    margin: 100px auto;
    height: 465px;
    background-image:url(card.png); 
    border: 1px solid #ccc;
}

页面代码是：

<div class="background"></div>
<div class="postcard"></div>

我尝试设置不同的z-index值，没有任何帮助。你知道我做错了吗？

Answer 1

z-index除非该元素的位置属性为其他而非静态，否则不会生效。在明信片div上试试position:relative。

.postcard {
    width: 700px;
    margin: 100px auto;
    height: 465px;
    background:red;
    border: 1px solid #ccc;
    position: relative;
}

JSfiddle Demo

Answer 2

将负z-index赋予背景div

.background {
width: 100%;
height: 1630px;
background: url(bkg.jpg) bottom center no-repeat;
background-size: contain;
position: fixed;
z-index:-63

}

Answer 3

为两个类设置z-index。此外，您的“背景”属性的顺序是错误的。检查一下：

使用速记属性时，属性值的顺序为：背景颜色的背景图片 的背景重复背景附件的背景位置 的

z-index: -1;

JSFiddle

水平拉伸背景对齐底部和div顺序

3 个答案: