Lección 8: Posicionamiento
Introducción al posicionamiento en CSS
El posicionamiento en CSS nos permite controlar cómo se colocan los elementos en una página web. Imagina que estás organizando muebles en una habitación: puedes ponerlos en su lugar natural, moverlos un poco, fijarlos a una pared o incluso hacerlos flotar en el aire. CSS nos da herramientas similares para organizar elementos en una página web.
El flujo normal del documento
Antes de hablar de posicionamiento, necesitamos entender qué es el "flujo normal del documento". Piensa en cómo lees un libro: empiezas arriba a la izquierda, lees hacia la derecha y luego bajas a la siguiente línea. Así es como los navegadores colocan los elementos por defecto en una página web. Los elementos de bloque (como párrafos) ocupan todo el ancho disponible y se apilan uno encima del otro. Los elementos en línea (como palabras en negrita) se colocan uno al lado del otro en la misma línea hasta que no hay más espacio y entonces pasan a la siguiente línea.
Valores de la propiedad position
static (valor por defecto)
Cuando un elemento tiene `position: static`, significa que sigue el flujo normal del documento que acabamos de describir. No se ve afectado por las propiedades top, right, bottom o left.
relative
Con `position: relative`, el elemento se posiciona según el flujo normal, pero luego se puede mover en relación a su posición original usando top, right, bottom o left. Esto no afecta la posición de otros elementos.
absolute
Un elemento con `position: absolute` se saca del flujo normal y se posiciona en relación a su ancestro posicionado más cercano (o al elemento si no hay ninguno). Otros elementos actúan como si el elemento absolute no existiera.
fixed
Un elemento `position: fixed` se saca del flujo normal y se posiciona en relación a la ventana del navegador. Se queda en la misma posición incluso cuando se hace scroll.
sticky
`position: sticky` es una mezcla entre `relative` y `fixed`. El elemento se comporta como `relative` hasta que alcanza un punto específico durante el scroll, entonces se comporta como `fixed`.
z-index
La propiedad `z-index` controla el orden de apilamiento de los elementos posicionados que se superponen. Piensa en ello como capas: un elemento con un `z-index` más alto aparecerá encima de un elemento con un `z-index` más bajo.
Ejercicio práctico
Ahora es tu turno de experimentar. Usa el editor a continuación para crear un diseño que utilice diferentes tipos de posicionamiento. Incluye elementos con position: relative, absolute, fixed y sticky. Usa z-index para controlar el orden de apilamiento de algunos elementos superpuestos.