0

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:

enter image description here

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:

Fig. 2

(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

M I P A
  • 63
  • 1
  • 6
  • There is an explanation in the comments to answer of the [post](https://stackoverflow.com/questions/34077883/css-positionfixed-without-top-gives-unexpected-layout/34078219#34078219): 1) The fixed div(`.site-header`) is taken out of flow; 2) The top margin of nonfixed(`.site-content`) is then collapsed with the margin of its containing box (body in your case); and, critically, 3) the collapsed margin (70px) is defined to be an attribute of the containing block(body in your case), not nonfixed. This causes fixed to be laid out according to the new top margin. – Jay Nyxed Jun 16 '20 at 00:47

1 Answers1

-1

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

Mohammed Ibrahim
  • 418
  • 4
  • 11