Question

我在另一个具有“position：absolute”的div下面的div有问题。我需要让页脚显示在容器 div下，但现在页脚出现在容器后面的某处。屏幕:(带有绿色背景的div是页脚） 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;
}

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而不是absolute。页脚上的margin-top属性需要大于或等于容器上的top属性才能使其低于它。

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是您为容器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并以这种方式包装容器，使包装器遵循页面的标准流程，并且容器可以完全位于该包装器中，如果需要代码示例，请告诉我

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

4 个答案: