另一个绝对定位的div下方的div

Question

我遇到一个问题，就是一个使用了"position: absolute"的div盖住了另一个div。 我需要让底部出现在容器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;
}

- voldemord147

---

你知道吗，当使用“position: absolute”时，它所用的HTML元素变得独立于其父元素，而父元素对其尺寸一无所知。 - Rupam Datta

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

在这个示例中，我删除了一些冗余的CSS，并在容器

上使用了position:relative，而不是absolute。页脚上的margin-top属性需要大于或等于容器上的top属性，以便它保持在其下方。

- Marcus Baptiste

Answer 2

您可以在非绝对定位的 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";

- Guga Nemsitsveridze

---

这也可以。我刚试过了。 在绝对定位的 div 下面放一个空的 div，并将其高度设置为您想要的任何高度。 此空 div 之后的元素将从该高度开始。 使用 Ctrl + Shift + I 检查元素的边距，填充等。 - Rajas Paunikar

Answer 3

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

- Artur Kapłon

Answer 4

不要使用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 是您为容器 div 设置的属性 margin-top 的像素数量。 document.getElementByClassName().offsetHeight 函数以像素为单位获取元素的高度（包括填充和边框）。

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

这种方法有其优点和缺点: 优点: 偏移量基于容器div的高度，因此它始终位于该div的正下方。 您不仅可以继续使用 position:absolute，而且还可以将此方法用于 position:fixed。 缺点：如果您添加另一个 div 影响页脚位置，您必须重写代码。如果不重新加载页面而调整窗口大小，对齐方式将不会改变（您可以通过在每次窗口高度更改时运行代码来解决此问题）。

- Quijibo

Answer 5

这里最好的答案并不是很好 我遇到了同样的问题 只需将绝对定位的div放入一个父div中，并将其相对定位 然后，检查绝对定位元素内部的元素，查看其高度，然后将该高度输入到父元素中。 绝对定位的元素，如果不超出流程（没有父元素，即附加到body），不会超出其父相对元素的边界，因此您需要手动输入所需的尺寸

- Danko Grgić

---

你的回答可以通过提供更多的支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好的回答的更多信息。 - undefined