html - 水平拉伸(stretch)背景对齐底部和 div 顺序

Question

我正在努力处理一些简单的(!)代码。我设法使水平拉伸(stretch)的背景与页面底部对齐，但应该位于其上方的内容 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 不会生效，除非元素的位置属性不是静态的other。在明信片 div 上尝试 position:relative。

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

JSfiddle Demo