Html 在另一个分区前面的分区

我需要将站点的容器移动到另一个有背景的div前面。 这就是它的外观（忽略所有其他元素，只需注意背景和容器）-

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

我尝试了一些“位置：绝对”和“顶部：x”的东西，它“很管用”，但当我在浏览器中使用放大镜时，它完全分散了

这是我的实际代码。。。 html:

---

我怀疑你在找这个

---

我在容器中添加了

margin

和

z-index

使用margin top:-120px；这样地？

<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>

@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;
}

.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;
}