Question

我目前正在构建一个视差页面，但我在部分上定位元素时遇到了问题。因此我的问题是绝对定位。

有没有办法让绝对位置只在一个部分内工作而不是整个页面/视口？

我做了一个非常简单的例子，说明了我要做的事情：https://jsfiddle.net/zu2epxxq/1/

正如您所看到的，#second部分中的段落应位于该部分内部，而不是主要部分#first。显然这是使用绝对定位的副作用。如何以干净和良好的方式解决这个问题？

HTML：

<section id="first">
  <div>
    <p>This is a test</p>
  </div>
</section>
<section id="second">
  <div>
    <p>More text that has to be pushed arund in this section</p>
  </div>
</section>

CSS：

html,
body {
  height: 100%;
  color: #fff;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

section {
  min-height: 100%;
}

#first {
  background-color: #000;
}

#second {
  background-color: #ddd;
}

section > div {
  bottom: 0;
  margin: 0;
  font-size: 4em;
  position: absolute;
  transform: translate(-50%, 50%);
  left: 50%;
}

Answer 1

使用＆＃34;位置：相对;＆＃34;在部分。然后，您可以相对于节元素定位子元素。

我是这样做的： https://jsfiddle.net/hpepwvdg/1/

但我更喜欢使用flexbox布局模式，因为我发现了flexbox的强大功能：（http://www.w3schools.com/css/css3_flexbox.asp）：

＆＃13;

html, body, .container {
    height: 100%;
      color: #fff;
}
.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

#first {
    background-color: #000;
}

#second {
    background-color: #ddd;
}

.centered_heading {
    font-size: 4em;
}

＆＃13;

<section class="container" id="first">
  <h1 class="centered_heading">Centered!</h1>
</section>

<section class="container" id="second">
  <h1 class="centered_heading">Centered!</h1>
</section>

＆＃13;

在部分中创建视差页面和定位元素

1 个答案: