水平拉伸背景对齐底部和div订单

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的两个类。而且，您的“背景”属性的顺序也是错误的。检查：

当使用速记属性的属性值的顺序是： 背景色 背景图像 背景重复 背景附件 背景位置

z-index: -1; 

JSFiddle

Answer 3

给负z-index的背景DIV

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

}