Html div 低于另一个绝对定位的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30559330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div below another absolute positioned div
提问by voldemord147
I have problem with a div below another div which has "position: absolute".
I need to make footerappear UNDER containerdiv but now footer is appearing somewhere behind container.
Screen: (div with green background is footer)
我在另一个具有“位置：绝对”的 div 下面的 div 有问题。我需要让页脚出现在容器div 下，但现在页脚出现在容器后面的某个地方。屏幕：（绿色背景的div是页脚）
HTML:
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:
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;
}
回答by Marcus Baptiste
Absolutely positioned elements will be removed from the flow of the document. So the footer moves up because container is not part of that flow. You would need to either use relative positioning on both, or absolute positioning for both and set their specific top and left values.
绝对定位的元素将从文档流中删除。所以页脚向上移动，因为容器不是该流的一部分。您需要对两者使用相对定位，或对两者使用绝对定位并设置其特定的顶部和左侧值。
Alternatively you could set a top margin on footer that makes it drop enough so it is positioned below the container.
或者，您可以在页脚上设置一个上边距，使其下降到足以使其位于容器下方。
You also need to look at your css. There are several redundant properties that are possibly conflicting.
您还需要查看您的 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;
}
Here in this fiddleI removed some of the redundant css and used position:relative on the container div instead of absolute. The margin-top property on the footer needs to be greater than or equal to the top property on the container in order for it to stay below it.
在这个小提琴中，我删除了一些多余的 css 并在容器 div 上使用了 position:relative 而不是绝对。页脚上的 margin-top 属性需要大于或等于容器上的 top 属性，以使其保持在其下方。
回答by Guga Nemsitsveridze
You can insert another blank divover your non-absolute divand give it height as has your absolute div:
您可以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:
CSS：
.absoluteDiv {
position: absolute;
left: 0;
}
.myDiv {
position: relative;
width: auto;
padding: 10px;
}
Now we can use JavaScriptcode to get the height of absolute div and give it to our blank div:
现在我们可以使用JavaScript代码来获取绝对 div 的高度并将其赋予我们的空白 div：
let absoluteDivHeight = document.getElementByClassName('absoluteDiv')[0].offsetHeight;
let blankDiv = document.getElementByClassName('blankDiv')[0];
blankDiv.style.height = absoluteDivHeight + 5 + "px";
回答by Artur Kap?on
Use a separate wrapper div with 100% height and wrap your container in it that way the wrapper is following the standard flow of the page, and the container can be positioned absolutely within that wrapper, let me know if you need code example.
使用具有 100% 高度的单独包装器 div 并将容器包装在其中，包装器遵循页面的标准流程，并且容器可以绝对定位在该包装器内，如果您需要代码示例，请告诉我。
回答by Quijibo
Instead of using position:relative, you can keep both of the div with absolute positioning using JavaScript, as that seems closer to what you are looking for.
而不是使用的position:relative，您可以继续使用都使用JavaScript绝对定位的div，因为这似乎更接近你在找什么。
What you need here is a function that will set the topproperty of the footer div to the exact value you need it to be.
您在这里需要的是一个函数，它将top页脚 div的属性设置为您需要的确切值。
Here's the code:
这是代码：
document.getElementByClassName("container").style.top = (266 + document.getElementByClassName("footer").offsetHeight) + "px";
Here's the explenation:
这是解释：
document.getElementByClassName().style.topis a HTML DOMmethod used to change properties through JavaScript, in this case the property is top.
document.getElementByClassName().style.top是一种用于通过 JavaScript 更改属性的HTML DOM方法，在这种情况下，属性是top.
The 266is the amount of pixels you set for property margin-topfor your container div.
这266是您margin-top为容器 div 的属性设置的像素数量。
The document.getElementByClassName().offsetHeightfunction gets the height of an element in pixels (including padding and borders).
该document.getElementByClassName().offsetHeight函数以像素为单位获取元素的高度（包括填充和边框）。
Finally, we add "px" to the number, so that the topproperty is given in pixels.
最后，我们将“px”添加到数字中，以便top以像素为单位给出属性。
This method has its pros and cons:
这种方法有其优点和缺点：
Pros:the offset is based on the height of the container div, so it is always positioned directly below the div. You can keep using not only position:absolute, but you can use this method also for position:fixed.
优点：偏移量基于容器 div 的高度，因此它始终位于 div 的正下方。您不仅可以继续使用position:absolute，而且您也可以将此方法用于position:fixed.
Cons:You must rewrite the code if you add another div that would affect the positioning 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.).
缺点：如果添加另一个会影响页脚位置的 div，则必须重写代码。如果您在不重新加载页面的情况下调整窗口大小，则对齐方式不会改变（您可以通过在每次窗口高度更改时运行代码来解决此问题。）。
