Hasta ahora, hemos visto cómo usar el posicionamiento relativo y absoluto en CSS. Estas herramientas son muy útiles, pero hay situaciones en las que no son suficientes.
🤔 Por ejemplo, ¿qué pasa si queremos que un elemento, como un encabezado o un menú, siempre esté visible sin importar cuánto desplace la página el usuario?
Aquí es donde entra en juego el posicionamiento fijo. Vamos a entender cómo funciona y en qué casos podemos usarlo.
¿Qué es el posicionamiento fijo?
El posicionamiento fijo (fixed positioning) es similar al posicionamiento absoluto en el sentido de que el elemento sale del flujo normal del documento. Esto significa que otros elementos actúan como si este no existiera y ocupan su lugar.
Sin embargo, hay una diferencia clave:
Características principales
- El elemento no se mueve aunque la página se desplace.
- Se posiciona con respecto al área visible (viewport) del navegador.
- Se usan las mismas propiedades de posicionamiento (
top,right,bottom,left).
Ejemplo:
Supongamos que queremos crear un aviso que siempre permanezca en la esquina superior izquierda de la pantalla, sin importar cuánto se desplace el usuario. Podemos lograrlo con estas reglas CSS:
<style>
.fixed {
position: fixed; /* Fijamos la posición */
top: 0; /* Lo ubicamos en la parte superior */
left: 0; /* Alineado a la izquierda */
background-color: #ffcc00; /* Color llamativo */
padding: 10px; /* Un poco de espacio interno */
}
</style>
<div class="fixed">Este bloque se mantiene fijo en la pantalla.</div>
<p>Desplázate hacia abajo y verás que el bloque sigue en la misma posición.</p>
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Prueba desplazarte y verás que el bloque amarillo no se mueve. Así es como funcionan los elementos con position: fixed.
Usos comunes del posicionamiento fijo
El posicionamiento fijo se usa en varios casos, como:
| Uso | Descripción |
|---|---|
| Encabezados fijos | Los sitios web suelen usarlo para que el menú de navegación esté siempre disponible. |
| Barras de notificación | Avisos o mensajes de alerta que se mantienen visibles. |
| Botones flotantes | Como botones de ayuda o de regreso al inicio. |
Por ejemplo, un menú de navegación fijo en la parte superior se haría así:
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%; /* Que ocupe toda la pantalla */
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
Este código haría que el menú siempre esté visible en la parte superior del sitio web, sin importar el desplazamiento.
Resumen
position: fixedsaca el elemento del flujo normal del documento.- El elemento se posiciona en relación con el área visible del navegador (
viewport). - No se mueve cuando el usuario desplaza la página.
- Es útil para menús, barra de navegación fija y botones flotantes.
Este tipo de posicionamiento puede hacer que un sitio web sea más fácil de navegar. Ahora que lo conoces, ¡prueba integrarlo en tus proyectos!
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.
