Css 背景传播到 header

Question

background-image从section开始，这意味着header部分是空白的（没有图像）。但是，随着 CSS 的添加，background-image 传播到 header！谁能解释一下发生了什么？

HTML:

<body>
  <!-- Forked from a template on Tutorialzine: https://tutorialzine.com/2016/06/freebie-landing-page-template-with-flexbox -->
  <header>
    <h2><a href="#">Mountain Travel</a></h2>
    <nav>
      <li class="new"><a href="#">Tours</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </nav>
  </header>

  <section class="hero">
    <div class="background-image" style="background-image: url(assets/img/main.jpg);"></div>
    <div class="hero-content-area">
      <h1>Mountain Travel</h1>
      <h3>Unmissable Adventure Tours Around The World</h3>
      <span class="old"><a href="#" class="btn">Contact Us Now</a></span>
    </div>
  </section>

</body>

CSS:

header {
  position: absolute;
  width: 100%;
}

Answer 1

当您将元素的 position 设置为 absolute 时，它会将其从正常文档流中删除。这意味着浏览器在放置后续内容时不会考虑其尺寸。在这种情况下，当 header 元素以这种方式折叠时，.hero 元素将向上移动页面以呈现在 header 元素内容的顶部。

Css 背景传播到 header

Css background propagated to the header

css

background-image