Css background propagated to the header

Question

The background-image begins from the section, which means the header part is blank (doesn't have the image). However, with the addition of the CSS, the background-image propagated to the header! Can anyone explain what happened?

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

score 0 · Accepted Answer · answered Jan 11 '20 at 19:03

When you set the position of an element to absolute it removes it from the normal document flow. This means that the browser won't take its dimensions into account when placing subsequent content. In this case, when the header element collapses in this way the .hero element is being moved up the page to render over the top of the content of the header element.

Css background propagated to the header

1 Answers1