Clever Geek Handbook

Div below another absolute positioned div

I have a problem with a div below another div that has "position: absolute". I need the footer to appear below the container , but now the footer appears somewhere behind the container. Screen: (div with green background footer) enter image description here

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;
}
+5


source to share


4 answers


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

Alternatively, you can set the header margin for the footer so that it is omitted enough to fit under the container.

You should also look at your CSS. There are several redundant properties that can conflict.



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've removed some of the redundant css and used position: relative in the container div instead of absolute. The margin-top property in the footer must be greater than or equal to the top property in the container to keep it below it.

+9


source


Instead of using it position:relative

, you can keep both divs absolutely positioned using JavaScript, as this seems closer to what you are looking for.

Here you need a function that will set the top

footer level property to the exact value you want.

Here is the code:

document.getElementByClassName("container").style.top = (266 + document.getElementByClassName("footer").offsetHeight) + "px";

Here's an explanation:

document.getElementByClassName().style.top

is an HTML DOM method used to change properties via JavaScript, in this case a property top

.



266

is the number of pixels you are setting the property margin-top

for your div container.

The function document.getElementByClassName().offsetHeight

returns the height of the element in pixels (including padding and borders).

Finally, we add "px" to the number so that the property is top

in pixels.

This method has its pros and cons:

Pros: The offset is based on the height of the container div, so it always sits directly below the div. You can keep using not only position:absolute

, but you can use this method also for position:fixed

.

Cons: You have to rewrite the code if you add another div that will affect the position of the footer. The alignment will not change if you resize the window without reloading the page (you can fix this by running the code every time the window height changes.).

0


source


You can insert another empty one div

on top of your non-absolute div

and give it a height equal to the 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 the code JavaScript

to get the height of the absolute div and pass it to our empty div:

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


source


Use a separate 100% high wrapper div and wrap your container in it so that the wrapper follows the standard flow of the page and the container can be positioned absolutely inside that wrapper, let me know if you need some example code.

0


source






More articles:


All Articles