html - 在另一个 div 前面的 div

Question

我需要将网站容器移动到另一个带有背景的 div 前面。 它应该是这样的(忽略所有其他元素，只注意背景和容器)-

这是现在的样子(错误):

我正在尝试使用“position: absolute”和“top: x”进行一些尝试，但它“效果不佳”，但是当我在浏览器中使用放大镜时，它完全分散了。

这是我的实际代码... HTML:

<div class="horni-panel">
    <div class="logo">
        Zhlednuto.cz
    </div>

    <div class="menu">
        Home, about atd.
    </div>

</div>

<!-- Mini pozadi -->
<div class="minipozadi">
    ahoj
</div>

<!-- hlavni obsah -->
<div class="container">
ahooj
</div>

和CSS:

@font-face
{
    font-family: Lato-Bold;
    src: url(fonts/Lato-Bold.ttf);
}

body
{
    background-color: #34495e;
}

.horni-panel
{
    border-top: 8px solid #34495e;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height: 77px;
    width: 100%;
    background-color: #ffffff;
}

.logo
{
    color: #34495e;
    font-family: Lato-Bold;
    font-size: 33px;
}

.minipozadi
{
    height: 282px;
    width: 100%;
    background-image: url(img/bg.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    position:absolute;
    top: 85px;
    left:0;
    right:0;
}

.container
{

    z-index: -1;
    margin: 0 auto;
    top:0;
    right:0;
    left:0;
    width: 70%;
    height: 500px;
    background-color: #ffffff;
    border-radius: 5px;
}

Answer 1

我怀疑你在找这个

http://output.jsbin.com/puladizire/2/

.minipozadi
{
    height: 282px;
    width: 100%;
    background:url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    position:absolute;
    top: 85px;
    left:0;
    right:0;
  z-index:1;
  text-align:center;
  font-size:30px;
}

.container
{

    z-index: 100;
    margin: 0 auto;
  position:absolute;
    top:0;
    right:0;
    left:0;
  margin-top:200px;
    width: 70%;
    height: 400px;
    background-color: #ffffff;
    border-radius: 5px;
}

我已经在容器中添加了 margin 和 z-index