- ¿Qué es el posicionamiento relativo?
- Cómo mover un elemento con position: relative
- Más allá del efecto :hover
El posicionamiento en CSS es clave para darle forma y orden a una página web. Hasta ahora, los elementos han seguido el flujo normal del documento, es decir, aparecen en el orden en que están en el código HTML.
🤔 Pero, ¿qué pasa si queremos mover un elemento sin alterar completamente el diseño?
Aquí es donde entra en juego el posicionamiento relativo.
¿Qué es el posicionamiento relativo?
Cuando aplicamos la propiedad position: relative; a un elemento, este se mueve en relación con su posición original. Es decir, el elemento sigue ocupando su espacio en el documento, pero podemos desplazarlo sin que los demás elementos intenten ocupar su lugar.
¿Para qué se usa el posicionamiento relativo?
El posicionamiento relativo es muy útil para:
✅ Crear pequeños efectos visuales o animaciones.
✅ Ajustar elementos dentro de un contenedor.
✅ Crear sombras duplicando un elemento ligeramente desplazado.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Cómo mover un elemento con position: relative
Cuando usamos position: relative;, podemos mover el elemento con estas cuatro propiedades:
| Propiedad | Descripción |
|---|---|
top |
Mueve el elemento hacia abajo si el valor es positivo, o hacia arriba si es negativo. |
right |
Mueve el elemento hacia la izquierda si el valor es positivo, o hacia la derecha si es negativo. |
bottom |
Mueve el elemento hacia arriba si el valor es positivo, o hacia abajo si es negativo. |
left |
Mueve el elemento hacia la derecha si el valor es positivo, o hacia la izquierda si es negativo. |
Ejemplo de código
.caja {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 20px; /* Mueve la caja 20px hacia abajo */
left: 30px; /* Mueve la caja 30px hacia la derecha */
}
En este ejemplo, la caja azul se mueve 20 píxeles hacia abajo y 30 píxeles hacia la derecha, pero su posición original sigue "reservada" en el documento.
¿Qué pasa si usamos valores negativos?
Podemos usar valores negativos para mover el elemento en la dirección opuesta.
.caja {
position: relative;
top: -10px; /* Se mueve 10px hacia arriba */
left: -20px; /* Se mueve 20px hacia la izquierda */
}
Visualizando el posicionamiento
Al modificar estas propiedades, el elemento se mueve respecto a su posición original. No afecta a los elementos cercanos porque su espacio sigue "ocupado".
Más allá del efecto :hover
En el ejemplo de CodePen, usamos position: relative; junto con el selector :hover para mover el elemento cuando ponemos el cursor sobre él.
Sin embargo, el posicionamiento relativo no es solo para efectos al pasar el cursor. Puede aplicarse de manera permanente a cualquier elemento para ajustar su posición en la página.
Resumen
position: relative;mueve un elemento sin sacarlo del flujo normal del documento.- Se usan las propiedades
top,right,bottomyleftpara desplazarlo desde su posición original. - Los valores positivos y negativos determinan la dirección del desplazamiento.
- Otros elementos no ocuparán su lugar original, ya que el espacio se mantiene reservado.
- Se puede usar para efectos visuales, ajustes finos o animaciones simples.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
