Ejemplo ( fixed ) con la Navigation Bar

Para colocarla arriba del todo y que ocupe todo el ancho, una forma sería mediante el siguiente código:

.child-1 { position: fixed; top: 0; left: 0; margin: 0; width: 100% }

De esta forma, iría "pegada" arriba del todo y a la izquierda y, como ha pasado a ser un elemento inline-block, establecemos que su width sea el 100%.

En este caso podemos aplicar fixed sin problema y que quede fijada, porque al hacer scroll no se va a notar, ya que queremos que siempre esté anclada al mismo lugar (arriba del todo).

IMPORTANTE: Si no está aplicado de manera general en el proyecto, habría que establecer la propiedad box-sizing: border-box; para que no se añadan al ancho otras propiedades (margin, etc.) establecidas por defecto o aposta.

Es decir, el código final sería este: .child-1 { position: fixed; top: 0; left: 0; margin: 0; width: 100%; box-sizing: border-box; }

(comprobar inspeccionando el elemento).

Ejemplo ( relative )

Inspeccionar el primer elemento por ej. y aplicarle .child-1 { position: relative; top: 400px; }

Vemos como los siguientes childs no suben a ocupar su espacio, ya que con relative el elemento posicionado NO SE SALE del Document Flow

.