如何在绝对元素之后推送元素

Question

我正在尝试显示一个元素的所有子元素。我有一个 <div> 包裹在一个 <section> 中，它有 position: absolute 并且它的 top、right、bottom 和 left 是全部为 0。在 <div> 之后，我有另一个 <div> 包裹在 <section> 中。 div 只是有一个 <h3> 和下面的 <p>。

这是 HTML 代码：

<main>
  <section class="fullscreen">
    <div class="container">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet</p>
      <a href="#">Link</a>
    </div>
  </section>
  <section>
    <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</main>

...这是 CSS:

main {
  clear: both;
}
main section:nth-child(1) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -10;
}
main section:nth-child(1) div.container {
  position: absolute;
    top: 50%;
    transform: translateY(-50%);
  text-align: center;
  width: 100%;
  margin: auto;
}

如何在 .fullscreen 之后不定义边距的情况下显示这样的页面？

Answer 1

从您的代码看来，您希望 section 元素占据整个屏幕高度。

你不需要定位来做到这一点。 Viewport units现在有很好的支持，你可以只分配高度为100vh。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
main {
  clear: both;
  /* not required there are no floats */
}
main section {
  height: 100vh;
  border-bottom: 2px solid red;
}
main section div.container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}

<main>
  <section class="fullscreen">
    <div class="container">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet</p>
      <a href="#section2">Link</a>
    </div>
  </section>
  <section id="section2">
    <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</main>

如何在绝对元素之后推送元素

How to push elements after absolute element

html

css

css-position