div below another absolute positioned div

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.


You can insert another blank div over your non-absolute div and give it height as has your absolute div:

<div class="absoluteDiv">
    <p>something</p>
</div>
<div class="blankDiv">
    //nothing here
</div>
<div class="myDiv">
    <p>some text</p>
    <p>Which is covering absolute div</p>
</div>

CSS:

.absoluteDiv {
    position: absolute;
    left: 0;
}

.myDiv {
    position: relative;
    width: auto;
    padding: 10px;
}

Now we can use JavaScript code to get the height of absolute div and give it to our blank div:

let absoluteDivHeight = document.getElementByClassName('absoluteDiv')[0].offsetHeight;
let blankDiv = document.getElementByClassName('blankDiv')[0];
blankDiv.style.height = absoluteDivHeight + 5 + "px";