Maquetación Web

Control Total: Display y Position

En este módulo desmitificamos los pilares del diseño web. Entenderás la naturaleza de los elementos (¿por qué algunos saltan de línea?), aprenderás a romper el flujo natural para anclar elementos y dominarás conceptos avanzados como el 'Stacking Context' para solucionar errores imposibles de z-index.

Controlar el espacio y la ubicación es la diferencia entre un sitio roto y uno profesional.

La Naturaleza de los Elementos: Block vs Inline

El estándar HTML divide los elementos en dos categorías fundamentales según su comportamiento visual por defecto: 1. **Elementos de Bloque (Block)**: Son estructurales. Siempre inician en una nueva línea y se expanden para ocupar todo el ancho disponible de su contenedor (100%). 2. **Elementos en Línea (Inline)**: Son fluidos. Se sitúan uno al lado del otro en la misma línea y su ancho se limita estrictamente al contenido que llevan dentro.

Esquema comparativo visual: Bloques apilados verticalmente vs Elementos en línea fluyendo horizontalmente — Los bloques crean estructura vertical (muros); los elementos en línea fluyen como texto (palabras).

Propiedades Permitidas según el Tipo

No todos los elementos aceptan las mismas reglas CSS. Esta distinción es vital para evitar frustraciones: * **Bloque**: Aceptan `width`, `height`, `margin` y `padding` en las cuatro direcciones. * **En Línea**: Ignoran el `width` y `height`. Aunque aceptan `margin` y `padding` horizontales, los verticales a menudo no empujan a los elementos vecinos, creando superposiciones visuales.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Intento fallido común */
span {
  width: 200px; /* Ignorado por el navegador */
  height: 100px; /* Ignorado por el navegador */
  margin-top: 50px; /* Visualmente no empuja nada */
}

/* Intento fallido común */
span {
  width: 200px; /* Ignorado por el navegador */
  height: 100px; /* Ignorado por el navegador */
  margin-top: 50px; /* Visualmente no empuja nada */
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Transformar un párrafo (bloque) para que fluya en línea */
p {
  display: inline;
  background-color: yellow;
}

/* Transformar un span (línea) para darle dimensiones de bloque */
span {
  display: block;
  width: 100%;
  background-color: grey;
}

/* Transformar un párrafo (bloque) para que fluya en línea */
p {
  display: inline;
  background-color: yellow;
}

/* Transformar un span (línea) para darle dimensiones de bloque */
span {
  display: block;
  width: 100%;
  background-color: grey;
}

Snippet de código mostrando la conversión de p a inline y span a block — Con CSS, la etiqueta HTML no dicta el destino visual; la propiedad display sí.

El Híbrido Perfecto: Inline-Block

¿Qué pasa si queremos elementos uno al lado del otro, pero necesitamos controlar su ancho y alto? Aquí entra `display: inline-block`. Combina lo mejor de ambos mundos: permite que los elementos fluyan horizontalmente (como texto), pero respeta las dimensiones y espaciados verticales (como bloques).

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.boton-tarjeta {
  display: inline-block;
  width: 150px;
  height: 50px;
  padding: 10px;
  /* Se alinea con otros, pero mantiene su tamaño */
}

.boton-tarjeta {
  display: inline-block;
  width: 150px;
  height: 50px;
  padding: 10px;
  /* Se alinea con otros, pero mantiene su tamaño */
}

El Arte de Ocultar: None vs Visibility

Existen dos formas principales de ocultar elementos, y confundirlas es un error común: 1. **`display: none`**: Elimina el elemento del renderizado. **No ocupa espacio**, los elementos vecinos se mueven para llenar el hueco. 2. **`visibility: hidden`**: Hace al elemento invisible, pero **conserva su espacio** (caja fantasma). La estructura de la página no cambia.

Comparativa visual: display:none colapsa el layout, visibility:hidden deja un hueco vacío — Usa 'none' para eliminar y 'hidden' para animaciones o reservar espacio.

Introducción al Posicionamiento (Position)

Más allá del flujo normal (bloque/línea), CSS nos permite ubicar elementos con coordenadas específicas usando la propiedad `position`. Al activar un posicionamiento distinto al `static` (valor por defecto), habilitamos 5 propiedades exclusivas: * `top`, `bottom`, `left`, `right` (Coordenadas) * `z-index` (Profundidad)

Gráfico de coordenadas mostrando los ejes top, right, bottom y left sobre un elemento — Estas coordenadas no tienen ningún efecto si el elemento es static.

Position: Relative

El posicionamiento relativo es sutil. El elemento permanece en el flujo normal del documento, pero se desplaza **en relación a su posición original**. **Clave**: El espacio que ocupaba originalmente se preserva (queda un hueco vacío), y el desplazamiento no empuja a otros elementos, sino que se superpone visualmente a ellos si es necesario.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.caja-desplazada {
  position: relative;
  top: 20px;  /* Baja 20px desde donde debería estar */
  left: 20px; /* Se mueve 20px a la derecha */
}

.caja-desplazada {
  position: relative;
  top: 20px;  /* Baja 20px desde donde debería estar */
  left: 20px; /* Se mueve 20px a la derecha */
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.padre-relativo {
  position: relative; /* Define el contexto de referencia */
  width: 400px;
}

.hijo-absoluto {
  position: absolute;
  top: 0;
  right: 0;
  /* Se pega a la esquina superior derecha del .padre-relativo */
}

.padre-relativo {
  position: relative; /* Define el contexto de referencia */
  width: 400px;
}

.hijo-absoluto {
  position: absolute;
  top: 0;
  right: 0;
  /* Se pega a la esquina superior derecha del .padre-relativo */
}

Diagrama de un elemento absoluto flotando sobre otro contenido dentro de un contenedor relativo — Regla de oro: 'Padre Relativo, Hijo Absoluto'. Es la base de casi todos los componentes de UI complejos.

Position: Fixed

Similar al absoluto, pero con una diferencia crítica: su referencia es siempre el **Viewport** (la ventana visible del navegador). Esto significa que el elemento se queda 'pegado' en la pantalla (como un sticker en el cristal) incluso cuando el usuario hace scroll. Es ideal para barras de navegación ('Navbars'), botones de chat o modales.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.menu-fijo {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  /* Siempre visible arriba, aunque bajes por la página */
}

.menu-fijo {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  /* Siempre visible arriba, aunque bajes por la página */
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.encabezado-seccion {
  position: sticky;
  top: 10px; /* Umbral: Se pega al llegar a 10px del borde */
}
/* NOTA: Sticky requiere que el elemento esté dentro de un contenedor con altura definida para funcionar */

.encabezado-seccion {
  position: sticky;
  top: 10px; /* Umbral: Se pega al llegar a 10px del borde */
}
/* NOTA: Sticky requiere que el elemento esté dentro de un contenedor con altura definida para funcionar */

Ilustración del comportamiento sticky: fluye y luego se ancla al borde — Sticky respeta los límites de su padre directo; dejará de flotar cuando el padre termine.

Controlando Capas con Z-Index

Cuando movemos elementos fuera del flujo normal, es común que se superpongan. ¿Cuál va encima? La propiedad `z-index` acepta un número entero para determinar el orden de apilamiento (eje Z). **Regla de Oro**: `z-index` SOLO funciona en elementos que tienen `position` definido (relative, absolute, fixed, sticky). En `static`, se ignora.

Diagrama 3D de capas apiladas mostrando índices Z: 1, 5, 100 — A mayor número, más cerca del usuario. Los negativos (-1) envían el elemento detrás del padre.

Nivel Experto: El Contexto de Apilamiento

¿Por qué a veces un `z-index: 9999` queda DEBAJO de un `z-index: 1`? Bienvenido al **Stacking Context**. Si un elemento padre tiene un `z-index` definido, crea un 'contexto local'. Sus hijos (incluso con z-index infinito) no pueden salir de ese nivel. Es como tener un rey en un juego de cartas pequeño: gana en su mazo, pero pierde contra el as del mazo principal.

Diagrama de jerarquía de contextos de apilamiento comparando padres e hijos — El hijo (z:999) del Padre A (z:1) siempre estará debajo del Padre B (z:2). La jerarquía manda.

Más Allá de Display: Flex y Grid

Aunque `inline-block` y `float` (ya obsoleto) sirvieron años para maquetar, hoy en día usamos sistemas de layout dedicados. * **Flexbox (`display: flex`)**: Para diseños unidimensionales (una fila o una columna). * **Grid (`display: grid`)**: Para diseños bidimensionales complejos (filas y columnas simultáneas). Estos valores cambian radicalmente cómo funcionan los hijos.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.contenedor-moderno {
  display: flex;
  justify-content: center; /* Centrado automático sin hacks */
}

.contenedor-moderno {
  display: flex;
  justify-content: center; /* Centrado automático sin hacks */
}

¿Cuál es la diferencia principal entre `display: block` y `display: inline`?

Los elementos de bloque (`block`) ocupan todo el ancho disponible y comienzan en una nueva línea (como un `div` o `p`). Los elementos en línea (`inline`) solo ocupan el ancho de su contenido y se sitúan uno al lado del otro (como un `span` o `a`).

¿Por qué el `width` y `height` no funcionan en mi elemento `span`?

Porque los elementos `inline` (como `span`) ignoran las propiedades de dimensiones. Para que acepten ancho y alto, debes cambiar su propiedad a `display: block` o `display: inline-block`.

¿Para qué sirve `display: inline-block`?

Es un híbrido que permite que el elemento fluya horizontalmente con otros elementos (como texto), pero conservando la capacidad de definirle ancho, alto, márgenes y rellenos verticales (como una caja).

¿Qué diferencia hay entre `display: none` y `visibility: hidden`?

`display: none` elimina el elemento del renderizado, por lo que no ocupa espacio y el diseño se reajusta. `visibility: hidden` lo hace invisible, pero el elemento sigue ocupando su espacio físico en la página (queda un hueco vacío).

¿Cómo interactúa `opacity: 0` comparado con `visibility: hidden`?

Ambos hacen el elemento invisible. La diferencia clave es que con `opacity: 0` el elemento sigue siendo interactivo (se puede hacer clic en él), mientras que con `visibility: hidden` se desactiva la interactividad.

¿Qué hace `position: static`?

Es el valor por defecto de todos los elementos HTML. Indica que el elemento sigue el flujo natural del documento. Las propiedades `top`, `left`, `right`, `bottom` y `z-index` no tienen ningún efecto sobre él.

¿Qué ocurre si aplico `position: relative` sin definir coordenadas?

Visualmente, nada cambia; el elemento se queda en su lugar original. Sin embargo, ahora el elemento se convierte en un 'punto de referencia' para sus hijos que tengan `position: absolute`, y también habilita el uso de `z-index`.

¿Cómo funciona exactamente `position: absolute`?

Saca al elemento del flujo normal (ya no reserva espacio). Se posiciona en relación a su ancestro posicionado más cercano (cualquiera que no sea `static`). Si no encuentra ninguno, se posiciona relativo al documento (`html`).

¿Cuál es la regla 'Padre Relativo, Hijo Absoluto'?

Es una técnica estándar de diseño: al padre se le da `position: relative` (para que sea la referencia) y al hijo `position: absolute` para moverlo libremente dentro de los límites del padre.

¿Cómo centro vertical y horizontalmente un elemento absoluto?

Una técnica clásica es: `top: 50%`, `left: 50%` y `transform: translate(-50%, -50%)`. Esto mueve el elemento al centro del padre y luego corrige su propia posición basándose en su tamaño.

¿Qué diferencia a `position: fixed` de `absolute`?

`Fixed` posiciona el elemento en relación a la ventana del navegador (viewport), no a un padre. Esto hace que el elemento se quede 'pegado' en la pantalla incluso cuando el usuario hace scroll.

¿Por qué mi `position: sticky` no funciona?

Suele fallar por dos razones: 1) No has definido una coordenada de anclaje (ej. `top: 0px`). 2) Uno de los contenedores padres tiene `overflow: hidden`, `scroll` o `auto`, lo cual rompe el contexto de scroll necesario.

¿Hasta dónde llega el efecto 'pegajoso' de `position: sticky`?

El elemento solo será pegajoso dentro de los límites de su contenedor padre directo. Cuando el scroll pasa el final del contenedor padre, el elemento sticky deja de flotar y se va con él.

¿Qué es el eje Z en CSS?

Es la profundidad tridimensional. Mientras X es horizontal e Y es vertical, el eje Z determina qué elemento está 'más cerca' del usuario cuando se superponen.

¿Por qué mi `z-index` no tiene efecto?

`z-index` solo funciona en elementos que tienen un `position` definido (`relative`, `absolute`, `fixed`, o `sticky`). Si el elemento es `static` (por defecto), la propiedad se ignora.

¿Puedo usar valores negativos en `z-index`?

Sí. Un `z-index` negativo (ej. `-1`) suele utilizarse para enviar un elemento detrás de su contenedor padre o detrás del flujo normal de contenido.

¿Qué es un 'Contexto de Apilamiento' (Stacking Context)?

Es como una capa o grupo aislado. Si un elemento crea un contexto de apilamiento, sus hijos no pueden salir de ese grupo. Un hijo con `z-index: 9999` dentro de un padre con `z-index: 1` nunca estará por encima de otro elemento externo con `z-index: 2`.

¿Qué propiedades crean un nuevo Contexto de Apilamiento además de `z-index`?

Propiedades como `opacity` menor a 1, `transform`, `filter`, `clip-path` o `will-change` crean automáticamente un nuevo contexto de apilamiento, lo que puede afectar el orden de capas inesperadamente.

¿Los márgenes verticales colapsan en `display: inline-block`?

No. El colapso de márgenes (donde dos márgenes se fusionan en uno solo) solo ocurre en elementos de bloque (`block`). En `inline-block`, los márgenes se suman.

¿Es recomendable usar `float` para maquetar hoy en día?

No para la estructura principal. `float` es propenso a errores y requiere 'hacks' (clearfix). Para layouts, es mejor usar estándares modernos como Flexbox o CSS Grid.

¿Puede un elemento absoluto desbordar (salirse de) su padre?

Sí, si las coordenadas lo empujan fuera. Si el padre tiene `overflow: hidden`, la parte que sobresale se cortará; si no, será visible sobre otros elementos.

¿Qué pasa si cambio un elemento `<a>` a `display: block`?

El enlace ocupará todo el ancho disponible del contenedor. Esto es muy útil para menús de navegación, permitiendo que el usuario pueda hacer clic en toda la franja del botón, no solo sobre el texto.

¿Cómo afecta `box-sizing: border-box` a las dimensiones?

Es vital para el posicionamiento preciso. Hace que el `padding` y el `border` se incluyan dentro del ancho total definido, evitando que un elemento de `width: 100%` se desborde al añadirle relleno.

¿Un elemento `fixed` en móvil se ve afectado por el teclado virtual?

A menudo sí. Cuando aparece el teclado en pantalla, el viewport visible cambia de tamaño, lo que puede causar que elementos `fixed` en la parte inferior (como botones de chat) salten o tapen el contenido.

¿Qué es el 'flujo normal' del documento?

Es la forma en que los navegadores colocan los elementos por defecto: de arriba a abajo para los bloques y de izquierda a derecha para los elementos en línea, antes de aplicar cualquier posicionamiento especial.

¿Puedo superponer elementos sin usar `position`?

Es posible usando márgenes negativos (ej: `margin-top: -20px`) o `transform`, pero usar `position` y `z-index` ofrece un control mucho más preciso y predecible sobre las capas.

¿Qué valor de `display` tienen las imágenes (`<img>`) por defecto?

Se comportan como `inline`, pero son elementos 'reemplazados', lo que significa que, curiosamente, aceptan dimensiones (width/height) como un `inline-block` aunque técnicamente no lo sean.

¿Cómo evito que un elemento `inline-block` tenga un pequeño espacio extra debajo?

Ese espacio es reservado para la 'descendente' de las letras (como la cola de la 'g'). Se soluciona aplicando `vertical-align: top` (o `middle/bottom`) al elemento, o `display: block`.

¿Qué sucede con `position: absolute` dentro de un contenedor `flex`?

El elemento absoluto se ignora en el cálculo del layout flexible (no ocupa espacio flex), pero si el contenedor flex tiene `position: relative`, el elemento absoluto se posicionará respecto a él.

¿Existe alguna forma de ocultar un elemento de la vista pero no de los lectores de pantalla?

Sí, usando una clase utilitaria 'sr-only' (screen reader only). Se suele usar `position: absolute`, `width: 1px`, `height: 1px`, `overflow: hidden` y `clip: rect(0,0,0,0)`. Ni `display: none` ni `visibility: hidden` logran esto.