绝对位置div不会推入其他内容 [英] Absolute Position div not pushing other content down

问题描述

我的大部分代码都放在jsFiddle中：

http://jsfiddle.net/MilkyTech/suxWt/

内容应该加载到第一页的白色方块中，内容溢出时会推送以下内容页面的部分向下。但是，可以看到，较低的部分在第一页白盒的顶部加载。

 < section class = 第1页 > 
< div class =巨大标题居中> 
< div id ='detailsbox'> 
< h1 id ='eorvtitle'>< / h1> 
< img id ='eorvimage'src =''> 
< div>< p>大量文字大量文字
< / div> 
< / div> 
< / section> 
< section class =page2id ='page2'> 
< / section> 
 
 .page1 {
 background：url（'../ img / bg.jpg'）＃131313; 
 background-size：cover; 
身高：100％; 
职位：亲属; 
} 
 .huge-title {
 position：absolute; 
 top：-20％; 
 right：0; 
 bottom：0; 
剩下：0; 
 margin：auto; 
宽度：100％; 
 height：180px; 
} 
 #detailsbox {
 top：-4em; 
宽度：75％;剩下
：12.5％; 
对：12.5％; 
 border：20px纯白色; 
 border-radius：10px; 
背景颜色：白色; 
 text-align：center; 
位置：绝对; 
 float：left; 
明确：两者; 
 
  

解决方案

您需要更改 .huge-title 和 #detailsbox 至 position：relative; <
您可以摆脱 background-size：cover;

也会更改 .huge -title 和 #detailsbox 添加到以下内容：

  .page1 {
 background：url（'../ img / bg.jpg'）＃131313; 
身高：100％; 
职位：亲属; 
} 
 .huge-title {
 position：relative; 
 top：20％; 
 right：0; 
剩下：0; 
 margin：auto; 
身高：100％; 
} 
 #detailsbox {
 top：-4em; 
宽度：75％;剩下
：12.5％; 
对：12.5％; 
 border：20px纯白色; 
 border-radius：10px; 
背景颜色：白色; 
 text-align：center; 
职位：亲属; 
 float：left; 
明确：两者; 
} 
  

Most of my code in a jsFiddle:

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

解决方案

you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:

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

这篇关于绝对位置div不会推入其他内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！