Me parece que la manera en la que el instructor expuso ese punto fue un poco confusa.
Primero vamos a analizar el código css de nuestra <div class="caja">
A mi parecer cuando ponemos position: relative
estamos dando la instrucción de que ese elemento se vuelva dinámico, es decir, que pueda verse afectada su posición y sus dimensiones, pero un punto importante es que ese elemento sigue en el mismo lugar, hasta ahora solo le dijimos que puede moverse, pero no hacia donde, después indicamos que su tamaño solo ocupe 940px (aquí es donde le decimos que cambie su tamaño y en cuanto), luego ahora si indicamos que se mueva, esto lo hacemos por medio de los márgenes en donde le decimos que no tenga margenes arriba o abajo pero que a la izquierda y derecha sean iguales, es decir, que se centre horizontalmente.
Ahora vamos a analizar el código de nuestra <nav>
Como la etiqueta <nav>
esta contenida dentro de nuestro bloque <div>
cuando establecemos una position: absolute
no es que la posición de <div>
sea relativa a <nav>
, más bien es al revés, la posición de <nav>
es absoluta a la posición que ya se definió para <div class="caja"
>.
Dicho esto, nuestro elemento <nav>
ahora estaría posicionado dentro de nuestro bloque <div>
y se debería mover dentro de él como le indiquemos, por eso le ponemos un valor de top: 120px
que es más o menos la mitad del alto del logo y le decimos que se vaya hasta la derecha dando un valor de right: 0
, fijate como solo se va hasta la derecha de la caja que ya movimos, aqui es donde comprobamos que la relación de posición no es como lo dijo el instructor si no al revés, en realidad <nav>
es absoluto con respecto a <div>
.
Una forma en la que puedes comprobar como <nav>
es el que tiene un desplazamiento absoluto con respecto a <div>
es incrementando el padding del header, así vas a ver como aunque el alto de nuestro header sea muy grande las palabras de los enlaces en nuestro <nav>
se mantienen en linea con el logo, esto es porque se mueven 120px desde la caja que contiene el logo por lo que es <nav>
quien se basa en la posición de <div>