div 低于另一个绝对定位 div

Question

我有一个 div 低于另一个 div 的问题，后者有 "position: absolute"。我需要让 footer 出现在 container 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 并在容器 div 上使用 position:relative 而不是绝对的。页脚上的边距顶部属性需要大于或等于容器上的顶部属性才能使其保持在其下方。

Answer 2

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

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

代码如下：

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

解释如下：

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

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

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

最后，我们将 "px" 添加到数字中，这样 top 属性以像素为单位。

这种方法有利也有弊：

优点： 偏移量基于容器 div 的高度，因此它始终位于 div 的正下方。您不仅可以继续使用 position:absolute，而且您还可以将此方法用于 position:fixed.

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

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 并将您的容器包装在其中，使包装器遵循页面的标准流程，并且容器可以绝对定位在该包装器内，让我知道您是否需要代码示例。

div 低于另一个绝对定位 div

div below another absolute positioned div

html

css

css-position