position: relative- adsoluta-fixed

POSITION: RELATIVE - La explicación definitiva

Imagina que tienes una habitación (la página web) con muebles (los elementos HTML). Cada mueble está colocado en su sitio siguiendo un orden lógico (el flujo normal). Pues bien, position: relative es como si pudieras coger un mueble y desplazarlo ligeramente de donde estaba, pero dejando un "hueco fantasma" en su lugar original.

¿QUÉ HACE EXACTAMENTE?

.elemento {
    position: relative;
    top: 20px;
    left: 30px;
}

Las 3 características fundamentales:

El elemento SE MUEVE visualmente (20px hacia abajo, 30px hacia la derecha)
Su ESPACIO ORIGINAL SE RESERVA (los demás elementos no pueden ocuparlo)
SIRVE DE REFERENCIA para elementos hijos con position: absolute

VISUALIZACIÓN: El "fantasma"

SIN RELATIVE:
┌─────────────────┐
│                 │
│   ┌─────────┐   │
│   │  CAJA   │   │
│   └─────────┘   │
│                 │
│   ┌─────────┐   │
│   │ SIGUIENTE│   │
│   └─────────┘   │
└─────────────────┘

CON RELATIVE (top: 20px; left: 30px):
┌─────────────────┐
│                 │
│   ┌─────────┐   │ ← El "hueco fantasma" 
│   │  (vacío)│   │   (sigue ahí aunque la caja se movió)
│   └─────────┘   │
│                 │
│      ┌─────────┐│
│      │  CAJA   ││ ← La caja se desplazó
│      │  (visible)│   20px abajo, 30px derecha
│      └─────────┘│
│                 │
│   ┌─────────┐   │
│   │ SIGUIENTE│   │ ← Los demás elementos NO pueden
│   └─────────┘   │     ocupar el espacio original
└─────────────────┘

Importante: La "siguiente" caja está exactamente donde estaría si la caja no se hubiera movido. No puede subir para ocupar el hueco.

CASOS DE USO PRÁCTICOS

1. AJUSTES FINOS (Micro-movimientos)

.icono {
    position: relative;
    top: -2px;  /* Sube el icono 2px para alinearlo mejor con el texto */
    left: 5px;  /* Lo separa ligeramente */
}

Ejemplo real: Cuando tienes un icono junto a un texto y visualmente "no pega" del todo.

2. SUPERPOSICIÓN CONTROLADA

.boton {
    position: relative;
    z-index: 10;  /* Sin relative, z-index no funciona */
}

Importante: z-index solo funciona en elementos posicionados (no static).

3. CONTENEDOR PARA ABSOLUTE (EL USO MÁS IMPORTANTE)

.tarjeta {
    position: relative;  /* Esto es CLAVE */
    width: 300px;
    height: 200px;
}

.etiqueta-nuevo {
    position: absolute;
    top: 10px;
    right: 10px;
    /* Se posiciona DENTRO de .tarjeta gracias a que .tarjeta es relative */
}

Sin el relative en el padre, la etiqueta se posicionaría respecto al <body> (toda la página). Con relative, se posiciona respecto a la tarjeta.

PROPIEDADES QUE PUEDES USAR

Con position: relative puedes usar:

top: desplaza hacia ABAJO (valores positivos) o ARRIBA (negativos)
right: desplaza hacia la IZQUIERDA (positivo) o DERECHA (negativo)
bottom: desplaza hacia ARRIBA (positivo) o ABAJO (negativo)
left: desplaza hacia la DERECHA (positivo) o IZQUIERDA (negativo)
z-index: controla la superposición

COMPORTAMIENTO CON MÁRGENES

.caja {
    position: relative;
    top: 20px;
    margin-bottom: 30px;
}

¿Qué pasa aquí?

El margen de 30px se aplica desde la POSICIÓN ORIGINAL (el fantasma)
Luego el elemento se mueve 20px adicionales
Efecto total: 50px de separación visual con el siguiente elemento

EJEMPLOS INTERACTIVOS MENTALES

Ejemplo 1: Galería de fotos

.foto {
    position: relative;
    top: -5px;
    transition: top 0.3s;
}

.foto:hover {
    top: -10px;  /* La foto "salta" hacia arriba al pasar el ratón */
}

El espacio de cada foto se mantiene, pero la foto se eleva creando un efecto "flotante".

Ejemplo 2: Tooltip personalizado

.boton {
    position: relative;
}

.boton:hover .tooltip {
    position: absolute;
    top: -30px;  /* Se posiciona 30px por encima del botón */
    left: 50%;
    transform: translateX(-50%);
}

El botón es relative para que el tooltip (absolute) sepa dónde posicionarse.

EN TU CÓDIGO (ANÁLISIS)

nav {
    position: relative;  /* Prepara el terreno */
}

section {
    position: relative;  /* Prepara el terreno */
}

section h1 {
    position: relative;  /* ¿Esto sobra? */
    margin: auto;
}

¿Están bien puestos?

nav y section como relative están bien: preparan el contenedor por si en el futuro necesitas poner algo absoluto dentro (un badge, un icono flotante, etc.)
El h1 con relative sobra porque:
1. No tiene hijos absolutos que necesiten referenciarlo
2. No lo estás moviendo con top/left
3. Podría ser static y funcionaría igual

DIFERENCIAS CLAVE CON OTROS POSITION

Comparación	¿Sale del flujo?	¿Espacio se reserva?	¿Referencia para absolutos?
RELATIVE	❌ No	✅ Sí	✅ Sí (el mejor para esto)
STATIC	❌ No	✅ Sí	❌ No
ABSOLUTE	✅ Sí	❌ No	❌ No (él es el que se posiciona)
FIXED	✅ Sí	❌ No	❌ No

ERRORES COMUNES

❌ Error 1: Usarlo para centrar

/* Esto NO centra */
.elemento {
    position: relative;
    left: 50%;  /* No es para centrar, es para desplazar */
}

❌ Error 2: Esperar que los demás ocupen su espacio

Los demás elementos NO pueden ocupar el espacio original del elemento relative.

❌ Error 3: Olvidar que el espacio original existe

.contenedor {
    height: 100px;
}

.elemento {
    position: relative;
    top: 50px;  /* Ahora el elemento ocupa visualmente hasta 150px */
                /* pero el contenedor sigue midiendo 100px */
}

Problema: El contenido puede desbordar el contenedor.

RESUMEN FINAL (Lo que realmente importa)

position: relative es como tener un clon invisible de tu elemento que sigue ocupando su lugar original, mientras el elemento visible se mueve libremente dentro de los límites que le permitas.

Úsalo para:

✅ Hacer microajustes visuales (subir/bajar ligeramente)
✅ Crear un contexto de posicionamiento para hijos absolutos (uso principal)
✅ Aplicar z-index cuando necesitas superposición
✅ Crear efectos hover con desplazamientos sutiles

No lo uses para:

❌ Centrar elementos (para eso hay flexbox, grid o margin)
❌ Sacar elementos del flujo (para eso está absolute)
❌ Si no necesitas ninguna de sus características (mejor déjalo static)

En tu código concreto, los relative en nav y section son una buena práctica preventiva. El del h1 puedes eliminarlo sin miedo.

POSITION: ABSOLUTE - La explicación definitiva

Imagina que estás en una fiesta (la página web) con mucha gente (los elementos HTML). Todos están colocados en fila, esperando su turno para algo (el flujo normal). De repente, alguien con position: absolute decide salirse de la fila, ignorar a todos los demás, y pegarse a la pared más cercana que tenga un punto de referencia.

¿QUÉ HACE EXACTAMENTE?

.elemento {
    position: absolute;
    top: 20px;
    left: 30px;
}

Las 3 características fundamentales:

El elemento SALE DEL FLUJO NORMAL (los demás elementos actúan como si no existiera)
Se posiciona respecto a su ANCESTRO POSICIONADO MÁS CERCANO (el primer padre con position: relative, absolute, fixed o sticky)
Si no encuentra ancestro posicionado, se posiciona respecto al <html> (el documento)

VISUALIZACIÓN: El que se sale de la fila

SIN ABSOLUTE (todos en flujo normal):
┌─────────────────────┐
│  ┌─────┐ ┌─────┐    │
│  │  A  │ │  B  │    │
│  └─────┘ └─────┘    │
│  ┌─────┐            │
│  │  C  │            │
│  └─────┘            │
└─────────────────────┘

CON ABSOLUTE (C se vuelve absolute):
┌─────────────────────┐
│  ┌─────┐ ┌─────┐    │
│  │  A  │ │  B  │    │ ← A y B siguen su vida
│  └─────┘ └─────┘    │   como si C no existiera
│                     │ ← El espacio de C desapareció
│                     │   (como si se lo hubiera tragado la tierra)
└─────────────────────┘

    ┌─────┐
    │  C  │ ← C aparece en otra posición
    └─────┘     (pegado a algún ancestro)

¿RESPECTO A QUÉ SE POSICIONA? (LO MÁS IMPORTANTE)

Caso 1: Con ancestro posicionado

<div class="contenedor" style="position: relative; width: 400px; height: 300px;">
    <div class="hijo" style="position: absolute; top: 20px; right: 20px;">
        Estoy en la esquina del contenedor
    </div>
</div>

┌─────────────────────────────────┐  <-- contenedor (position: relative)
│                                 │
│                                 │
│                    ┌─────────┐  │
│                    │  HIJO   │  │  ← absolute con top:20px; right:20px
│                    └─────────┘  │  (pegado a la esquina del contenedor)
│                                 │
└─────────────────────────────────┘

Caso 2: Sin ancestro posicionado

<div class="hijo" style="position: absolute; top: 0; left: 0;">
    Me pego a la esquina de TODA LA PÁGINA
</div>

┌─────────────────────────────────┐  <-- html (el último recurso)
│┌─────────┐                      │
││  HIJO   │                      │  ← absolute con top:0; left:0
│└─────────┘                      │  (pegado a la esquina de la página)
│                                 │
│                                 │
└─────────────────────────────────┘

PROPIEDADES QUE PUEDES USAR

Con position: absolute puedes usar:

top: distancia desde el borde SUPERIOR del ancestro
right: distancia desde el borde DERECHO del ancestro
bottom: distancia desde el borde INFERIOR del ancestro
left: distancia desde el borde IZQUIERDO del ancestro
z-index: controla la superposición (vital para elementos superpuestos)

TRUCO: CENTRAR CON ABSOLUTE

.elemento {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

¿Qué hace?

top: 50% coloca la ESQUINA superior del elemento en el 50% del padre
left: 50% coloca la ESQUINA izquierda en el 50%
transform: translate(-50%, -50%) desplaza el elemento hacia atrás la mitad de su propio tamaño

Resultado: El elemento queda perfectamente centrado, sin importar su tamaño.

CASOS DE USO PRÁCTICOS

1. BADGES Y ETIQUETAS (el caso más común)

.tarjeta {
    position: relative;  /* El padre se convierte en referencia */
    width: 200px;
    height: 300px;
}

.etiqueta-oferta {
    position: absolute;
    top: -10px;
    right: -10px;
    background: red;
    color: white;
    padding: 5px;
    border-radius: 50%;
}

┌───────────────────────┐
│   ╔══════╗            │
│   ║ OFERTA║           │ ← Badge que sobresale de la tarjeta
│   ╚══════╝            │
│ ┌───────────────────┐ │
│ │                   │ │
│ │      TARJETA      │ │
│ │                   │ │
│ └───────────────────┘ │
└───────────────────────┘

2. CAPAS SUPERPUESTAS (overlays)

.contenedor-imagen {
    position: relative;
    width: 500px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5); /* Capa semitransparente */
    opacity: 0;
    transition: opacity 0.3s;
}

.contenedor-imagen:hover .overlay {
    opacity: 1; /* Aparece la capa al hacer hover */
}

3. MENÚS DESPLEGABLES

.menu {
    position: relative;
}

.submenu {
    position: absolute;
    top: 100%;  /* Justo debajo del menú */
    left: 0;
    display: none;  /* Oculto por defecto */
}

.menu:hover .submenu {
    display: block;  /* Aparece al hacer hover */
}

4. TOOLTIPS (globos de ayuda)

.boton {
    position: relative;
}

.boton .tooltip {
    position: absolute;
    bottom: 100%;  /* Encima del botón */
    left: 50%;
    transform: translateX(-50%);
    background: black;
    color: white;
    padding: 5px;
    white-space: nowrap;
    display: none;
}

.boton:hover .tooltip {
    display: block;  /* Aparece al pasar el ratón */
}

COMPORTAMIENTO CON ANCHO Y ALTO

.absolute {
    position: absolute;
    /* Sin width, se ajusta al contenido */
    top: 20px;
    left: 20px;
    right: 20px;  /* ¡Esto también funciona! */
    bottom: 20px;
}

Si defines left Y right, el elemento se estira horizontalmente. Si defines top Y bottom, se estira verticalmente.

.absolute {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;  /* Ancho = contenedor - 40px */
    bottom: 20px;  /* Alto = contenedor - 40px */
    /* No necesitas width/height */
}

EN TU CÓDIGO (ANÁLISIS)

En tu código no usas absolute actualmente, pero tienes relative preparado:

nav {
    position: relative;  /* Preparado para que si pones un absolute
                            dentro, se posicione respecto a nav */
}

section {
    position: relative;  /* Preparado para que si pones un absolute
                            dentro, se posicione respecto a section */
}

Si quisieras añadir algo como:

<section>
    <h1>REGISTRO <span style="position: absolute; top: -10px; color: red;">*</span></h1>
    <!-- La estrellita roja se posicionaría respecto a section,
         no respecto al h1 (porque h1 no es relative) -->
</section>

DIFERENCIAS CLAVE

Comparación	¿Sale del flujo?	¿Espacio se reserva?	¿Referencia?
ABSOLUTE	✅ Sí	❌ No	Ancestro posicionado
RELATIVE	❌ No	✅ Sí	Sí mismo
FIXED	✅ Sí	❌ No	Viewport (ventana)
STATIC	❌ No	✅ Sí	Ninguna

ERRORES COMUNES

❌ Error 1: Olvidar el relative en el padre

.contenedor {
    /* Me olvidé de poner position: relative */
}

.hijo {
    position: absolute;
    top: 0;  /* Esto se posiciona respecto al HTML, no al contenedor */
}

❌ Error 2: Creer que ocupa espacio

.contenedor {
    position: relative;
}

.hijo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
}

.otro {
    margin-top: 10px;  /* Esto no se verá afectado por .hijo
                          porque .hijo no ocupa espacio */
}

❌ Error 3: Usarlo para todo

/* MAL: No necesitas absolute para esto */
.boton {
    position: absolute;
    margin: 20px;  /* Un margin normal hubiera bastado */
}

❌ Error 4: Confundir top/bottom/left/right con márgenes

top: 20px NO es lo mismo que margin-top: 20px. El margen empuja a otros elementos, top simplemente posiciona.

TRUCO AVANZADO: STACKING CONTEXT

Cuando usas absolute, los elementos se apilan según su z-index:

.capa1 {
    position: absolute;
    z-index: 1;
    background: red;
}

.capa2 {
    position: absolute;
    z-index: 2;  /* Esta se ve POR ENCIMA */
    background: blue;
    top: 20px;
    left: 20px;
}

Importante: El z-index solo compara elementos dentro del MISMO contexto de apilamiento.

RESUMEN FINAL (Lo que realmente importa)

position: absolute es como sacar a un elemento de la realidad (el flujo normal) y pegarlo a un sistema de coordenadas proporcionado por su ancestro posicionado más cercano.

Úsalo para:

✅ Superponer elementos (badges, etiquetas, capas)
✅ Posicionar elementos con precisión quirúrgica
✅ Crear menús desplegables y tooltips
✅ Hacer overlays y modales

Recuerda siempre:

✅ El padre necesita position: relative (o cualquier position no static)
✅ El elemento absolute desaparece del flujo (no ocupa espacio)
✅ Puedes usar top/right/bottom/left para posicionar
✅ Usa z-index para controlar qué va encima de qué

position: fixed

Cuando usas position: fixed, ambas cajas se salen del flujo normal del documento. Es como si las "levantaras" del suelo y las pegaras en la pantalla.

¡Exactamente! No necesitas usar position: fixed si estás trabajando con flexbox. De hecho, flexbox y position: fixed son enfoques diferentes:

Flexbox (flujo normal de cajas):

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.menu-superior {
    /* SIN position: fixed */
    background-color: #333;
    padding: 15px;
}

.contenedor-flex {
    display: flex;
    flex: 1;  /* Ocupa el resto del espacio */
}

.menu-lateral {
    width: 200px;
    /* SIN position: fixed */
    background-color: #f0f0f0;
    padding: 20px;
}

Ventajas:

✅ Flujo natural de cajas
✅ No necesitas calcular posiciones con top, left
✅ El espacio se distribuye automáticamente
✅ Más fácil de mantener y entender

Position Fixed (sacas las cajas del flujo):

.menu-superior {
    position: fixed;  /* Saca la caja del flujo */
    top: 0;
    width: 100%;
}

.menu-lateral {
    position: fixed;  /* Saca la caja del flujo */
    top: 60px;        /* Tienes que calcular manualmente */
    left: 0;
}

Desventajas:

❌ Las cajas se salen del flujo normal
❌ Tienes que calcular manualmente las posiciones
❌ Más propenso a errores y espacios no deseados
❌ Menos responsivo

¿Cuál usar?

Si quieres...	Usa...
✅ Flujo natural de cajas	Flexbox (sin fixed)
✅ Que se acomode solo	Flexbox (sin fixed)
✅ Fácil de mantener	Flexbox (sin fixed)
✅ Responsivo automático	Flexbox (sin fixed)
❌ Que el menú flote sobre el contenido	Position fixed

Mi recomendación:

Si te gusta el flujo natural de cajas, quédate con flexbox y olvida position: fixed. Es más simple y elegante. El código que me mostraste sin fixed es el correcto:

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.menu-superior {
    background-color: #333;
    padding: 15px;
    /* SIN FIXED */
}

.contenedor-flex {
    display: flex;
    flex: 1;
}

.menu-lateral {
    width: 200px;
    background-color: #f0f0f0;
    padding: 20px;
    /* SIN FIXED */
}

¿Por qué es mejor?

Las cajas fluyen naturalmente
El menú lateral tiene la altura exacta que necesita
No hay espacios mágicos que calcular
Si la ventana cambia de tamaño, todo se ajusta solo