Почему элемент с позицией: фиксированное перемещение с не-расположенным братом?

Есть много вопросов по S.O. которые охватывают ответ на вопрос о том, как это исправить (добавьте top: 0), но ни один из них не пытается объяснить причину движения заголовка. Мне более любопытно, почему это так.

<header>Project Header</header> 
<main class="container" id="layout-mainContent">
    <div class="row" id="first-row">somecontent</div>
</main>

header {
   position: fixed;
}

#layout-maincontent {
   margin-top: 90px;  //moves header down.
}

Список подобных вопросов, но без аргументов:

Кажется разумным думать, что фиксированный заголовок находится в верхней части окна браузера и не должен перемещаться из-за другого не-дочернего, не родительского div (aka sibling). Особенно потому что фиксированный заголовок выходит за пределы обычного потока документов. MDN по фиксированному размещению

Гипотеза: Путаница проистекает из идеи, что фиксированные элементы относятся к окну браузера. Это верно, но вычисляется с использованием окна просмотра. Видовой экран рассчитывается с использованием элементов, которые находятся в пределах обычного потока документов. Поскольку первый div, который находится внутри потока документа, является не-заголовком div, окно просмотра начинается после применения margin-top. Это просто предположение, и я бы хотел, чтобы кто-то подтвердил или поправил меня.

Ответ 1

С position: fixed ваш элемент header удаляется из потока документов.

Первый элемент в потоке main, который имеет margin-top: 90px в вашем коде.

Родитель этого элемента body, который обычно имеет значение по умолчанию margin: 8px (см. таблица стилей HTML по умолчанию).

Из-за CSS разворот маржи элемент body margin-top: 8px свернут с помощью main элемент margin-top: 90px.

В результате оба элемента, теперь имеющие одинаковый запас, сдвигаются вниз на 90 пикселей.

html {
    background-color: green;
    height: 100%;
 }

body {
    background-color: pink;
    height: 100%;
}

header {
   position: fixed;
   border: 1px solid red;
}

main {
  margin-top: 90px;
  background-color:yellow;
}

<header>Project Header</header> 
<main class="container" id="layout-mainContent">
    <div class="row" id="first-row">somecontent</div>
</main>