Introducción
La propiedad position especifica el tipo de método de posicionamiento utilizado para un
elemento. Hay cinco valores principales:
staticrelativeabsolutefixedsticky
1. Position: Static (Por defecto)
Es el comportamiento predeterminado. Los elementos se posicionan según el flujo normal de la página. Las
propiedades top, bottom, left, y right no les
afectan.
Este elemento sigue el flujo normal.
.elemento {
position: static;
}2. Position: Relative
El elemento se posiciona relativo a su posición normal. Ajustar top, right,
bottom, o left moverá el elemento lejos de donde estaría normalmente, pero
no afecta al espacio que ocupa (el hueco original se mantiene).
El cuadrado rojo se ha movido 50px a la derecha y 10px abajo desde su posición original.
.elemento {
position: relative;
left: 50px;
top: 10px;
}3. Position: Absolute
El elemento se posiciona relativo a su ancestro posicionado más cercano (que no sea
static). Si no hay ninguno, se posiciona relativo al documento (body). Se elimina
del flujo normal y no ocupa espacio.
El contenedor tiene position: relative.
El cuadrado verde está posicionado absolutamente arriba a la derecha de este contenedor.
.contenedor {
position: relative;
}
.hijo {
position: absolute;
top: 20px;
right: 20px;
}4. Position: Fixed
El elemento se posiciona relativo a la ventana del navegador (viewport). Se queda fijo en el mismo lugar incluso si haces scroll. Se elimina del flujo normal.
Mira la esquina inferior derecha de tu pantalla. Ahí verás el cuadro "Fixed Real". Aunque hagas scroll en la página, ese cuadro no se moverá de su sitio.
.elemento {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000; /* Para asegurar que se vea encima de todo */
}5. Position: Sticky
Es un híbrido entre relative y fixed. El elemento se comporta como
relative hasta que cruza un umbral de desplazamiento (scroll), momento en el cual se
comporta como fixed.
Haz scroll aquí dentro ↓
Contenido de relleno...
Más contenido...
Más contenido...
Más contenido...
Más contenido...
.elemento {
position: sticky;
top: 0;
}