html - ¿Por qué un elemento con posición: fijo se mueve con un hermano no posicionado?

css css3

Question

Hay muchas preguntas sobre SO que cubren la respuesta a cómo solucionar esto (agregue top: 0 ), pero ninguna de ellas intenta explicar realmente el razonamiento detrás del movimiento del encabezado. Tengo más curiosidad de por qué este es el caso.

<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.
}

Lista de preguntas similares pero sin razonamiento:

1. Div de posición ''fija'' superior que se mueve con div de posición no
2. el margen afecta la posición de otros elementos fijos
3. el margen superior div hace que el encabezado fijo se mueva hacia abajo

Parece razonable pensar que el encabezado fijo se adhiere a la parte superior de la ventana del navegador y no debe moverse debido a otro div no posicionado, no secundario y no primario (también conocido como hermano). Esp. porque el encabezado fijo está fuera del flujo normal de documentos. MDN en posicionamiento fijo

Hipótesis: la confusión surge de la idea de que los elementos fijos son relativos a la ventana del navegador. Esto es cierto, pero se calcula utilizando la ventana gráfica. La ventana gráfica se calcula utilizando elementos que están dentro del flujo de documentos normal. Debido a que el primer div que está dentro del flujo de documentos es el div sin encabezado, la ventana gráfica comienza después de que se aplica el margen superior. Esto es solo especulación y me encantaría ver a alguien confirmarme o corregirme.

Answer 1

Con position: fixed , su elemento de header se elimina del flujo de documentos.

El primer elemento en flujo es main , que tiene margin-top: 90px en su código.

El elemento principal de este elemento es body , que normalmente tiene un margin: 8px predeterminado margin: 8px (consulte la hoja de estilo predeterminada de HTML ).

Debido al colapso del margen CSS, el margin-top: 8px del elemento del body margin-top: 8px se contrae con el margin-top: 90px del elemento margin-top: 90px .

Como resultado, ambos elementos, que ahora tienen el mismo margen, cambian 90px hacia abajo.

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>

jsFiddle

La razón por la que se mueve el encabezado fijo es la siguiente:

• Aunque el bloque contenedor para un elemento con position: fixed es la ventana gráfica ...
• Las propiedades de desplazamiento de CSS ( top , bottom , left y right ) tienen un valor inicial de auto , que mantiene el elemento donde normalmente estaría si estuviera en el flujo de documentos.
• Dicho de otra manera, cuando establece un elemento en position: absolute o position: fixed (otra forma de position: absolute ), está especificando el tipo de posicionamiento que desea ... pero no lo está colocando en ningún lado.
• No es hasta que defina los desplazamientos que el elemento está realmente posicionado.
• Para cambiar el encabezado a la parte superior de la ventana gráfica, use top: 0 .

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

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

header {
   position: fixed;
   border: 1px solid red;
   top: 0px; /* NEW */
}

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>

jsFiddle