在另一个div前面划分

Question

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

这就是它现在的样子（错误）：

我正在尝试使用＆＃34; position：absolute＆＃34;和＆＃34; top：x＆＃34;而它的小作品＃34;但是当我在浏览器中使用放大镜时，它完全分散了。

这是我的实际代码...... 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添加到容器