html – Absolute Position div不会推送其他内容

发布时间：2020-12-14 23:43:04 所属栏目：资源来源：网络整理

导读：我在jsFiddle中的大多数代码： http://jsfiddle.net/MilkyTech/suxWt/ 内容应该在白色框中的第一页上加载,溢出的内容会将页面的以下部分向下推.但是,可以看出,下部加载在第一页白框的顶部.我试过改变各个部分的定位/清除但似乎无法创建必要的动作. section c

我在jsFiddle中的大多数代码：

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

内容应该在白色框中的第一页上加载,溢出的内容会将页面的以下部分向下推.但是,可以看出,下部加载在第一页白框的顶部.我试过改变各个部分的定位/清除但似乎无法创建必要的动作.

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

解决方法

你需要改变.huge-title和#detailsbox到position：relative;
你可以摆脱背景大小：封面;
还将.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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!