div低于另一个绝对定位的div

Question

我有另一个div下面的div的问题，它有“position：absolute”。我需要让页脚出现在容器div下面，但现在页脚出现在容器后面的某个地方。屏幕:(带有绿色背景的div是页脚）

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

绝对定位的元素将从文档流中删除。因此，页脚向上移动是因为容器不是该流程的一部分。您需要在两者上使用相对定位，或者两者都使用绝对定位，并设置其特定的顶部和左侧值。

或者，您可以在页脚上设置一个上边距，使其足够下降，使其位于容器下方。

你还需要看看你的CSS。有几个可能存在冲突的冗余属性。

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

在这个fiddle中我删除了一些冗余的css并使用了position：relative在容器div上而不是绝对的。页脚上的margin-top属性需要大于或等于容器上的top属性才能使其低于它。

Answer 2

您可以使用JavaScript保持两个div的绝对定位，而不是使用position:relative，因为它看起来更接近您正在寻找的内容。

你需要的是一个函数，它将页脚div的top属性设置为你需要的确切值。

这是代码：

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

这是解释：

document.getElementByClassName().style.top是用于通过JavaScript更改属性的HTML DOM方法，在这种情况下属性是top。

266是您为容器div设置的属性margin-top的像素数量。

document.getElementByClassName().offsetHeight函数以像素（包括填充和边框）获取元素的高度。

最后，我们将“px”添加到数字中，以便以像素为单位给出top属性。

这种方法有其优点和缺点：

优点：偏移量基于容器div的高度，因此它总是直接位于div的下方。您不仅可以继续使用position:absolute，还可以将此方法用于position:fixed。

缺点：如果添加另一个会影响页脚定位的div，则必须重写代码。如果在不重新加载页面的情况下调整窗口大小，则对齐方式不会更改（您可以通过每次窗口高度更改时运行代码来解决此问题。）。

Answer 3

你可以在你的非绝对div上插入另一个空白的div并给它高度，就像你的绝对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;
}

现在我们可以使用JavaScript代码获取绝对div的高度并将其赋予我们的空白div：

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

Answer 4

使用一个单独的100％高度的包装器div并将容器包装在其中，使得包装器遵循页面的标准流程，并且容器可以绝对定位在该包装器中，如果您需要代码示例，请告诉我。