Html 绝对位置div不会向下推其他内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23999810/
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
Absolute Position div not pushing other content down
提问by user3608238
Most of my code in a jsFiddle:
我在 jsFiddle 中的大部分代码：
http://jsfiddle.net/MilkyTech/suxWt/
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
内容应该在第一页的白色框中加载，溢出的内容将页面的以下部分向下推。但是，可以看出下部加载在第一页白框的顶部。我曾尝试更改各个部分的定位/清除，但似乎无法创建必要的运动。
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
采纳答案by Chris L
you need to change .huge-titleand #detailsboxto position:relative;
you can probably get rid of background-size: cover;
also change .huge-titleand #detailsboxto the following:
你需要改变.huge-title，并#detailsbox给position:relative;
你或许可以摆脱background-size: cover;
也改变.huge-title并#detailsbox于以下内容：
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
回答by Mayank Tripathi
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
绝对定位不会将容器向下推。它根据 z 索引将自己置于它们的上方或下方。您需要将绝对内容包含在相对容器中，以将其他容器向下推，类似于 jquery 滑块中的容器。
回答by KnightHawk
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relativeposition.
绝对位置的正确功能是重叠内容。如果您希望其他内容自动下推，请使用relative位置。
回答by d512
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
绝对定位元素从 HTML 的主要流程中删除。这就是为什么它没有向下推它下面的元素。它现在位于它之前和之后的元素之上，而不是它们之间。
You may want to check this out.
你可能想看看这个。
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
如果没有看到您试图实现的设计，就很难说绝对定位对您的情况是否有意义。使用默认（又名“静态”）或相对定位会将其他内容推到白框下方，但如果不仔细查看，很难判断这是否是真正的解决方案。
回答by Shashank Reddy Arrabothu
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two. Refer this answer
解决方案是创建一个空的间隔div，向右或向左浮动。这将确保两者之间有空间。 参考这个答案
回答by Ozgu
You can add another empty section between page1 and page2 and give the css below
您可以在 page1 和 page2 之间添加另一个空白部分，并在下面给出 css
height: 100%;
高度：100%；
