Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
position controla cómo se ubica un elemento respecto a su flujo normal. Empecemos por los dos valores más básicos: static y relative.
Explicación
position controla cómo se posiciona un elemento respecto a su flujo normal. Estos son los dos valores más básicos:
position: staticValor por defecto de todo elemento: sigue el flujo normal del documento, uno detrás del otro.
position: relativeEl elemento sigue ocupando su espacio original en el flujo, pero se puede desplazar visualmente con top/right/bottom/left.
top / right / bottom / leftDefinen cuánto se desplaza el elemento desde su posición original. Solo funcionan si position no es static.
Reto rápido
Cambia top y left de .mover por valores negativos y observa hacia dónde se mueve la caja.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
position: relative por sí solo no mueve nada: solo tiene efecto cuando lo combinas con top, right, bottom o left.
Dato extra
Aunque .mover se desplace visualmente, el espacio que ocupaba originalmente sigue reservado en el flujo — por eso puede solaparse con sus vecinos en vez de empujarlos.
Error común
Esperar que top/left funcionen en un elemento con position: static (el valor por defecto): esas propiedades se ignoran por completo si no defines antes un position distinto de static.
Siguiente paso
Ya sabes desplazar un elemento sin sacarlo del flujo. Ahora veamos cómo sacarlo por completo con position: absolute.
Ir a la siguiente lección