Diferencia entre position: relative, position: absolute y position: fixed en CSS
En CSS, la propiedad position define cómo se posiciona un elemento en la página. Los valores más comunes son relative, absolute y fixed, cada uno con un comportamiento específico en relación con su contenedor y la ventana del navegador.
position: relative
Un elemento con position: relative se posiciona en relación con su posición original en el flujo del documento. Si se aplican propiedades como top, right, bottom o left, el elemento se moverá desde su ubicación original sin afectar a los demás elementos.
Ejemplo:
.relative-box {
position: relative;
top: 20px;
left: 10px;
}Esto moverá el elemento 20 píxeles hacia abajo y 10 píxeles hacia la derecha desde su posición original.
position: absolute
Con position: absolute, el elemento se elimina del flujo del documento y se posiciona en relación con el primer ancestro con position: relative, absolute o fixed. Si no hay ninguno, se posiciona respecto al <html>.
Ejemplo:
.container {
position: relative;
width: 300px;
height: 200px;
}
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
}
Si .absolute-box está dentro de .container, se moverá 50 píxeles hacia abajo y 50 píxeles hacia la derecha desde el borde superior izquierdo de .container.
position: fixed
Un elemento con position: fixed se posiciona en relación con la ventana del navegador y permanece fijo aunque se haga scroll en la página.
Ejemplo:
.fixed-box {
position: fixed;
top: 0;
right: 0;
width: 100px;
height: 50px;
background: red;
}Este elemento permanecerá en la esquina superior derecha de la pantalla sin importar el desplazamiento de la página.
Conclusión
-
relative: Se mueve desde su posición original sin afectar a otros elementos. -
absolute: Se posiciona en relación con su primer ancestro posicionado y se elimina del flujo del documento. -
fixed: Se mantiene fijo en la ventana del navegador, sin importar el desplazamiento.
Jorge García
Fullstack developer