Without top it defaults to the top of the parent element.

I was going to ask “what does top default to when the position property is set to fixed?” but what I’ve read on the MDN web docs and a possibly related case haven’t helped me understand what’s going on here, I’m quite confused – so I couldn’t think of a better way to ask the question, I apologize.

I have the following HTML elements:

<header class="site-header"></header>

<div class="site-content"></div>

with this style:

.site-header {
  width: 100%;
  height: 70px;
  position: fixed;
  /* delete this `top` to "break it" */
  top: 0;

  background: red;
  opacity: 0.5;
}

.site-content {
  width: 100%;
  height: 120vh;
  margin-top: 70px;

  background: blue;
}

Now, this works as I would imagine, just by reading it, and it looks like this:

But if I remove top in site-header, the header suddendly moves 70px to the bottom, and that value seems to come from margin-top in site-content… even though that’s not the first element:

(Notice the colors blend to indicate the elements start from the same Y position, overlapping)

What’s going on here, why are they sharing that value? I’m fairly new to CSS but not totally, so I kind of want to get a grasp of these technical things in the CSS internals.

A Pen to play around