CSS — 1. Layout y posicionamiento

1. Layout y posicionamiento

En esta guía aprenderás cómo el navegador coloca y alinea elementos. Verás los modos de display, las estrategias de position, un repaso de float y dos herramientas modernas: Flexbox y Grid.

1.1 Display: block, inline, inline-block, none

Explicación

block: ocupa todo el ancho disponible e inicia en línea nueva.
inline: fluye en línea; no acepta width/height personalizados.
inline-block: fluye en línea, pero acepta width/height y padding completos.
none: oculta el elemento y no ocupa espacio.

Demostración

Block (div):

Soy block y ocupo el ancho completo

Inline (a): no respeta width/height personalizados.

Texto antes Enlace inline Otro inline Texto después

Inline-block (span): permite width/height/padding:

Inline-block 220px Inline-block 140px

None: el siguiente elemento está oculto (no ocupa espacio):

Elemento visible después de display:none

Micropráctica (2 min)

Convierte botones inline a inline-block para alinearlos y aplicar padding:

Antes (inline):

Botón A Botón B

Después (inline-block):

Botón A Botón B

/* Solución conceptual */
.boton { display: inline-block; padding: 8px 12px; }

1.2 Posicionamiento: position/top/right/bottom/left/z-index

Explicación

static (por defecto): sin posicionamiento especial.
relative: crea contexto; puede desplazarse con top/right/bottom/left sin salir del flujo.
absolute: sale del flujo; se posiciona respecto al ancestro posicionado más cercano.
fixed: respecto al viewport; ideal para elementos siempre visibles.
sticky: híbrido; “se pega” cuando alcanza el offset indicado.

z-index define el orden de apilamiento (requiere position distinto de static).

Demostración: badge absoluto en contenedor relative

Tarjeta con badge Nuevo

<div class="relative">
  Tarjeta con badge
  <span class="badge">Nuevo</span>
</div>

/* CSS clave */
.relative { position: relative; }
.badge { position: absolute; top: -10px; right: -10px; }

Demostración: fixed vs sticky

Soy fixed (siempre visible, relativo al viewport)

Soy sticky (me quedo pegado al llegar al top)

Desplázate para percibir la diferencia: fixed permanece siempre; sticky se activa al alcanzar su posición.

.fixed { position: fixed; top: 10px; left: 10px; right: 10px; }
.sticky { position: sticky; top: 10px; }

Micropráctica

Posiciona un icono (absolute) en la esquina de una imagen (contenedor relative):

★

/* Claves */
.contenedor { position: relative; }
.icono { position: absolute; top: 8px; right: 8px; }

1.3 Float y clear

Histórico para maquetación; hoy se usa para envolver texto alrededor de imágenes. Para layout preferimos Flex/Grid.

Demostración

Este texto fluye alrededor de la imagen gracias a float: left. Observa cómo el texto ocupa el espacio disponible a la derecha.

Si necesitamos empezar una nueva sección debajo sin que se solape, usamos clear.

Sección posterior sin solaparse gracias a clear: both;.

img { float: left; margin: 6px 12px 6px 0; }
.clear { clear: both; }

1.4 Flexbox y Grid

Conceptos clave

Flexbox: eje principal, justify-content, align-items, flex-wrap.
Grid: filas/columnas, gap, grid-template-columns con repeat y auto-fit/minmax.

Demostración Flex: menú horizontal centrado y espaciado

.menu {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

Demostración Grid: galería responsiva

.gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Micropráctica

Flex: reorganiza 4 tarjetas en una fila con espaciado.

Tarjeta 1

Tarjeta 2

Tarjeta 3

Tarjeta 4

.contenedor {
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

Grid: las mismas 4 tarjetas en dos columnas.

Tarjeta A

Tarjeta B

Tarjeta C

Tarjeta D

.contenedor {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

Checklist de comprensión

¿Cuándo usar inline vs inline-block?
¿Cómo crear un contexto relative y posicionar elementos absolute dentro?
¿Diferencias prácticas entre fixed y sticky al hacer scroll?
¿Cuándo usar Flex (una dimensión) vs Grid (dos dimensiones)?
¿Puedes construir una galería responsive con repeat(auto-fit, minmax())?