div below another absolute positioned div

Question

I have problem with a div below another div which has "position: absolute". I need to make footer appear UNDER container div but now footer is appearing somewhere behind container. Screen: (div with green background is footer)

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


Lorem ipsum dolor sit amet. x 40
</div>

CSS:

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

body
{
    font-family: Myriad Pro;
    font-size: 17px;
    color: #a1a8af;
    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: cover;
    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
{
    padding: 20px;
    margin: 0 auto;
    border-radius: 5px;
    z-index: 100;
    position:absolute;
    top:0;
    right:0;
    left:0;
    margin-top:266px;
    width: 70%;
    background-color: #ffffff;
    border-rder-radius: 5px;
}

.footer
{
margin: 0 auto;
    width: 100%;
    height: 480px;
    background-color: green;
}

Answer 1

Absolutely positioned elements will be removed from the flow of the document. So the footer moves up because container is not part of that flow. You would need to either use relative positioning on both, or absolute positioning for both and set their specific top and left values.

Alternatively you could set a top margin on footer that makes it drop enough so it is positioned below the container.

You also need to look at your css. There are several redundant properties that are possibly conflicting.

body
{
    font-family: arial;
    font-size: 17px;
    color: #a1a8af;
    background-color: #34495e;
}

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

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

.minipozadi
{
    height: 100px;  width: 100%;
    position:absolute;
    background-color: blue;
    top: 85px;   left:0;
    z-index:1;
    text-align:center;
    font-size:30px;
}

.container
{
    padding: 20px;
    border-radius: 5px;
    z-index: 100;
    position:relative;
    margin: 0 auto;
    top: 120px;
    width: 70%;
    background-color: #fea;
}

.footer
{
    margin-top: 120px;
    width: 100%;
    height: 80px;
    background-color: green;
}

Here in this fiddle I removed some of the redundant css and used position:relative on the container div instead of absolute. The margin-top property on the footer needs to be greater than or equal to the top property on the container in order for it to stay below it.