Un elemento de página con posicionamiento relativo te da el control para absolutamente posicion elementos secundarios dentro de él.
Para algunos, esto es obvio. Para otros, este puede ser uno de esos CSS “¡Ajá!” Momentos. Recuerdo que fue muy importante para mí cuando lo “entendí” por primera vez.
Aquí hay una imagen:
El posicionamiento relativo en el padre es el Vaya cosa aquí. Mira lo que pasaría si te olvidas de eso:
Este es un cambio significativo. Lo que está sucediendo es que los elementos absolutamente posicionados se están posicionando en relación con el elemento del cuerpo en lugar de su padre directo. Entonces, si la ventana del navegador crece, la de la parte inferior izquierda se quedará con la ventana del navegador, no se quedará adentro como su hermano de la primera imagen.
Una vez que “envuelva” su cabeza alrededor de este concepto (rim-shot), encontrará pequeños usos para él por todas partes, y comenzará a notar ejemplos de otros lugares que lo usan. Es como cuando aprendes una palabra nueva y luego comienzas a escucharla en todas partes. Sí.
Puedes jugar con la demostración anterior aquí:
¿Qué tal algunos ejemplos?
Estaría encantado.
 |
Un botón de “cerrar” que siempre desea colocar en la parte superior izquierda de un cuadro (para replicar una ventana del sistema operativo). |
 |
Un botón de “inicio” ubicado en la esquina superior derecha de la ventana para que sus usuarios nunca se sientan demasiado perdidos |
 |
Un recordatorio en un formulario de registro para recordar a los usuarios que si ya son miembros deben iniciar sesión arriba. |
 |
Los enlaces “Volver al principio” se colocarán en la parte inferior derecha de cada gran bloque de texto. |
Ver demostración Descargar archivos