Question

我在jsFiddle中的大多数代码：

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

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

Answer 1

绝对定位不会压缩容器。它基于z索引将其置于其上方或下方。您需要将绝对内容包含在相对容器中，以便向下推送其他容器，类似于jquery滑块中的容器。

Answer 2

您需要将.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;
}

Answer 3

绝对位置的正确功能是重叠内容。如果您希望其他内容自动下推，请使用relative位置。

Answer 4

绝对定位的元素将从HTML的主流中删除。这就是为什么它不推动它下面的元素。它现在位于元素之前和之后，而不是它们之间。

您可能需要check this out。

如果没有看到您尝试实施的设计，很难说绝对定位在您的案例中是否有意义。使用默认值（也就是＆＃34;静态＆＃34;）或者可能是相对定位会将其他内容推到白框下方，但是如果没有设计它就很难判断它是否是真正的解决方案。

Answer 5

解决方案是创建一个向右或向左浮动的空间隔div。这将确保两者之间存在空间。 Refer this answer

Answer 6

您可以在page1和page2之间添加另一个空白部分，并在下面给出css

身高：100％;

Answer 7

在绝对实体和其他组件之间添加一个绝对实体大小为空的div可能会有所帮助。

绝对位置不会推动其他内容

7 个答案: