CSS Display & Posición

Cómo se comportan y ubican los elementos en el flujo del documento.

display Valor clave

Define el tipo de caja. block, inline, inline-block, flex, grid, none, contents…

block — ancho completo
inline fluye en línea
inline -block W+H OK
position: static · relative · absolute · fixed · sticky Posición

Controla el método de posicionamiento con top, right, bottom, left y z-index.

static — flujo normal
relative: top:2 left:8
absolute

fixed: relativo al viewport · sticky: fluye hasta umbral

z-index · stacking context Apilamiento

Orden Z de los elementos posicionados. Solo funciona con position distinto de static.

z-index:1
z-index:3
z-index:2
float · clear Legado

float saca un elemento del flujo normal y lo alinea al borde del contenedor. clear evita que otros elementos rodeen al flotante.

float:left

Este texto rodea al elemento flotante. float se usa históricamente para layouts de columnas y texto con imagen.

clear:both — nadie flota aquí
overflow · overflow-x · overflow-y Desbordamiento

Controla qué ocurre cuando el contenido supera el tamaño de su caja. Afecta al scrolling, a la visibilidad y al stacking context.

visible
sale de la caja
hidden
el texto largo se corta sin scrollbar aquí
scroll
scrollbar siempre visible aunque sobre espacio
auto
scrollbar solo cuando el contenido no cabe en la caja disponible
overflow: visible | hidden | scroll | auto | clip
position — Playground interactivo Interactivo

Selecciona un valor de position y observa cómo el elemento se comporta respecto al flujo del documento y al viewport.

Hermano antes
El elemento
Hermano después
.el { position: static; }
clip-path Recorte

Recorta un elemento con formas geométricas o rutas SVG. No afecta al espacio que ocupa el elemento en el layout.

circle
polygon
inset
arrow
clip-path: circle(50%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: inset(10px round 8px);
visibility · opacity · display:none Visibilidad

Tres formas de ocultar elementos con comportamientos muy distintos respecto al layout, accesibilidad y eventos.

opacity:0
ocupa espacio
no clickeable*
accesible
visibility:hidden
ocupa espacio
no clickeable
no accesible
display:none
no ocupa espacio
no clickeable
no accesible

*pointer-events:none hace opacity:0 no clickeable

aspect-ratio Moderno

Mantiene la relación ancho/alto de un elemento automáticamente al cambiar su tamaño. Elimina el hack del padding-top trick.

16:9
1:1
4:3
.video { aspect-ratio: 16 / 9; width: 100%; }
.avatar { aspect-ratio: 1; }       /* cuadrado */
.card   { aspect-ratio: 4 / 3; }