Contenido del curso
Cómo posicionar elementos con CSS
La propiedad position en CSS te permite controlar dónde y cómo se renderiza cada elemento en el navegador. Si estás aprendiendo a maquetar interfaces, dominar los cinco valores clave (relative, absolute, fixed, sticky y el complemento z-index) marca la diferencia entre un layout rígido y uno realmente flexible.
Antes de mover nada, conviene preparar el terreno. En el ejemplo se aplican estilos base a varios contenedores agrupando selectores con coma (.contenedor, .contenedor-padre, .contenedor-scroll, .contenedor-z-index) y añadiendo borde sólido de 2px, margin vertical de 20px y padding de 10px. Esa técnica de agrupar clases con coma te ahorra repetir reglas y mantiene el CSS limpio [3:00].
¿Qué hace position relative y cómo se mueve un elemento?
Con position: relative mueves un elemento desde su posición original sin afectar a sus hermanos. El espacio que ocupaba originalmente se conserva.
En el ejercicio, la clase .caja-relative recibe position: relative, top: 20px y left: 30px. El cuadro se desplaza, pero hermano-1 y hermano-2 siguen exactamente donde estaban. Para mover el elemento puedes usar top, right, bottom o left, siempre que tenga declarado un position distinto al estático [6:30].
¿Cuándo uso position relative? Cuando quieres ajustar la posición visual de un elemento sin alterar el flujo del documento ni mover a sus hermanos.
¿Cómo funciona position absolute respecto al contenedor padre?
El position: absolute saca al elemento del flujo normal: sus hermanos no respetan su espacio y puede moverse libremente dentro de su contenedor padre. La condición clave: el padre debe tener un position relative, fixed o sticky, de lo contrario el elemento se posicionará respecto al <html> y perderás el control [8:15].
En el código, .contenedor-padre recibe position: relative y height: 100px. Luego, .hijo-absolute se declara con position: absolute, top: 10px y right: 10px. El resultado: el hijo se ancla a la esquina superior derecha del padre y los hermanos se acomodan como si no existiera.
¿Cuál es la diferencia entre relative y absolute?
¿Para qué sirve position fixed en una página web?
El position: fixed ancla un elemento a una coordenada de la ventana del navegador, sin importar el scroll ni el position del padre. El elemento permanece fijo en pantalla aunque el usuario recorra todo el sitio.
En el ejemplo, .button-fix se define con position: fixed, bottom: 30px y right: 30px. Ese patrón es el que ves en los botones flotantes de chat de soporte: siempre visibles en la esquina inferior derecha, sin importar dónde estés en la página [13:40].
¿Position fixed necesita un padre con position relative? No. A diferencia de absolute, fixed se posiciona respecto al viewport, así que el padre no necesita ninguna regla especial.
¿Cómo combinar relative y fixed con position sticky?
El position: sticky es un híbrido: el elemento se comporta como relative hasta que el scroll alcanza un umbral (definido por top, bottom, left o right), momento en el que pasa a comportarse como fixed.
Para verlo en acción, .contenedor-scroll recibe height: 150px y overflow-y: auto para forzar scroll interno. Luego, .elemento-sticky se declara con position: sticky y top: 0. Mientras haces scroll, el elemento se queda pegado en la parte superior del contenedor; al volver atrás, recupera su posición original.
Es el comportamiento típico de barras de navegación que se fijan al hacer scroll y se sueltan cuando vuelves al inicio.
¿Qué es z-index y cómo apilar elementos en CSS?
El z-index no es un valor de position, pero es indispensable cuando varios elementos posicionados se superponen. Define el orden de apilamiento en el eje Z: a mayor número, más cerca del usuario.
Una regla importante: el z-index solo funciona en elementos con un position distinto a static (relative, absolute, fixed o sticky).
¿Cómo se aplica z-index con un ejemplo de tres capas?
En el ejercicio, .contenedor-z-index lleva position: relative y height: 150px. Las clases .capa reciben position: absolute, width: 80px y height: 80px. Después, cada capa se diferencia:
.capa-1: top: 20px, left: 20px, background-color: blue, z-index: 1..capa-2: top: 40px, left: 40px, background-color: red, z-index: 2..capa-3: top: 60px, left: 60px, background-color: green, z-index: 3.Sin z-index, las tres se apilan según el orden del HTML. Al asignar valores crecientes, la capa verde queda al frente, la roja en medio y la azul al fondo, sin importar su orden en el markup.
¿Qué z-index queda al frente? El número mayor. Un elemento con
z-index: 3se renderiza encima de otro conz-index: 1, siempre que ambos tengan un position aplicado.
Con estos cinco recursos (relative, absolute, fixed, sticky y z-index) ya tienes el control completo del posicionamiento en CSS. Cuéntame en los comentarios qué patrón vas a usar primero en tu próximo proyecto.