Posición relativa de CSS
- Página anterior Resumen de posición de CSS
- Página siguiente Posición absoluta de CSS
El cuadro del elemento configurado con posición relativa se desplazará una cierta distancia. El elemento aún mantiene su forma no posicionada, y el espacio que ocupaba originalmente se mantiene.
Posición relativa de CSS
La posición relativa es un concepto muy fácil de dominar. Si se realiza una posición relativa en un elemento, aparecerá en su posición actual. Luego, se puede establecer la posición vertical o horizontal para que este elemento 'se mueva' en relación con su punto de partida.
Si se establece top en 20px, la caja estará 20 píxeles debajo de la parte superior de la posición original. Si se establece left en 30 píxeles, se creará un espacio de 30 píxeles a la izquierda del elemento, lo que significa que se desplazará el elemento hacia la derecha.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
Como se muestra en la siguiente imagen:
Tenga en cuenta que al usar la posición relativa, el elemento aún ocupa el espacio original, independientemente de si se mueve o no. Por lo tanto, mover el elemento puede causar que cubra otros cuadros.
Ejemplo de posición relativa de CSS
- Posición: Posición relativa
- Este ejemplo muestra cómo posicionar un elemento en relación con su posición normal.
- Página anterior Resumen de posición de CSS
- Página siguiente Posición absoluta de CSS
