Why does my header moves down when I set it fixed?

I have the following html/css (see snippet below) which demonstrates a fixed header.

I noticed that before explicitly setting the value of top to the header: top: 0px; its value is taken from the margin-top of the section and is 120px.

This is seen in Chrome devtools (from header element):

I am not sure why that is. Can someone please explain and provide a relevant pointer to the documentation?

Thanks in advance.

header {
  border: 1px solid black;
  position: fixed;
  width: 100%;
  height: 100px;
}

section {
  margin-top: 120px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/header-footer.style.css">
</head>
<body>
<header>
  <h1>This is my header</h1>
</header>
<section>
  <article>
    <h2>First article</h2>

    <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl
      typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin
      coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub
      hammock.</p>
  </article>

  <article>
    <h2>Second article</h2>

    <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl
      typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin
      coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub
      hammock.</p>
  </article>

  <article>
    <h2>Third article</h2>

    <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl
      typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin
      coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub
      hammock.</p>

    <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit.
      Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid
      chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
  </article>
  <article>
    <h2>Fourth article</h2>

    <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl
      typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin
      coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub
      hammock.</p>
  </article>

  <article>
    <h2>Fifth article</h2>

    <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl
      typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin
      coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub
      hammock.</p>
  </article>
</section>
</body>
</html>

You need to sign in to view this answers

Related Post