Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

Duda posición relativa

En el minuto [07:30] del video dice lo siguiente: * Entonces, habíamos puesto posición relativa. ¿Relativa a qué? Relativa a la posición absoluta que habíamos definido anteriormente. Entonces, posición relativa y un margen de 0 en la parte superior e inferior y automático a los bordes.*

No me queda clara esta parte, ya que el elemento que tiene la posición absoluta es el NAV y NAV está dentro del DIV, ¿Cómo es que influye la posición absoluta de un elemento que está contenido en un elemento que es el contenedor.

3 respuestas
solución!

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>

Hola Rodrigo, muchas gracias por tomarte el tiempo de dar una amplia explicación, me queda mucho mas claro ahora y en efecto me estaba causando mucha confusión cómo se planteo en la clase

Tuve la misma duda que tú, no me quedaba claro como dice que la posición del objeto "padre" es relativa a la posición que se definió en un objeto "hijo"