CSS

Display y position: controla el flujo y la posición de tus elementos

Aprende a dominar el flujo del documento con display y a ubicar elementos con position sin romper el layout.

¿Cuánto sabes de CSS?

📘 Teoría

display: el comportamiento base de la caja

Define si un elemento fluye como bloque, texto o tarjeta.

block ocupa todo el ancho disponible y genera salto de línea.

inline fluye con el texto y no acepta width/height.

inline-block combina ambos: fluye como texto, pero admite tamaño y padding.

display: none elimina el elemento del flujo y del layout.

Usa block para secciones completas.
Usa inline-block para badges o botones alineados.
Evita display: none si necesitas transiciones (usa visibility + opacity).

Comparación rápida

.block { display: block; width: 100%; }
.inline { display: inline; }
.inline-block { display: inline-block; padding: 6px 10px; }
.hidden { display: none; }

position: mover sin perder el orden

Cada modo responde a reglas distintas.

static es el valor por defecto: el navegador coloca el elemento según el flujo.

relative desplaza el elemento respecto a su posición original, sin afectar a los demás.

absolute sale del flujo y se posiciona respecto a su ancestro con position definido.

fixed se queda pegado al viewport y no se mueve con el scroll.

sticky se comporta como relative hasta llegar a un punto, donde se fija.

Absolute dentro de un contenedor

.card {
  position: relative;
  padding: 20px;
  border-radius: 12px;
}

.badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

Capas y z-index

El orden de apilamiento no siempre es obvio.

z-index solo funciona en elementos posicionados (relative, absolute, fixed, sticky).

Ciertos estilos crean contextos de apilamiento nuevos (position + z-index, transform, opacity).

Si algo no se ve, revisa si otro elemento está en una capa superior.

Define z-index de forma escalonada (10, 20, 30).
Evita valores gigantes si no hacen falta.

Stacking simple

.overlay { position: fixed; z-index: 30; }
.header { position: sticky; top: 0; z-index: 20; }
.card { position: relative; z-index: 1; }

Ayudas para controlar el flujo

Pequeños ajustes que evitan problemas comunes.

overflow controla si el contenido desborda o se recorta.

visibility: hidden oculta sin romper el layout.

Usa min-height para evitar saltos cuando el contenido crece.

Overflow y visibilidad

.panel {
  height: 180px;
  overflow: hidden;
}

.panel.is-hidden {
  visibility: hidden;
}

1 display: el comportamiento base de la caja 2 position: mover sin perder el orden 3 Capas y z-index 4 Ayudas para controlar el flujo

🧭 Visuales clave

Como funciona position

Aterriza visualmente que sistema de referencia usa cada valor de position.

Comparativa de position static, relative, absolute, fixed y sticky.

🧪 Aprende probando

Ejemplo Demo visual: static y flujo normal Observa cómo `static` respeta el flujo del documento y por qué `top` o `left` no hacen nada en ese modo.

⌄

Ejemplo Fila con inline-block Convierte tarjetas en una fila sin Flexbox.

⌄

Ejemplo Badge absoluto en tarjeta Aprende a usar relative + absolute.

⌄

🏁 Retos

🧰 Recursos

Enlaces útiles

MDN Layout: introducción web.dev Learn CSS - Layout MDN display MDN position

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

Recursos del curso 78

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 12

Tablas en CSS: legibles, compactas y responsive

Lección 14

Color en CSS: hex, rgb, hsl y accesibilidad

›