01
fixedAviso siempre visible
Se fija a la ventana del navegador y deja de ocupar espacio en el flujo normal.
position: fixed;
top: 0; left: 0;Guía visual · CSS
Elementos que fluyen, se fijan y se alinean.
Una lectura guiada del ejemplo original para entender cómo trabajan juntos
fixed, sticky, absolute y
flex en una cabecera hero.
fixed · viewport
logo
hero · relative
sticky · top: 40px
01 — Anatomía
Cada técnica resuelve una parte distinta
La composición funciona porque cada elemento tiene una referencia y una responsabilidad claras.
02
stickyMenú que se queda pegado
Avanza con la página hasta alcanzar el umbral indicado por top.
position: sticky;
top: var(--altura-barra);03
absoluteLogo sobre el hero
Se coloca tomando como referencia el ancestro posicionado más cercano.
position: absolute;
top: 20px; left: 40px;04
flexAlineación y reparto
Organiza los elementos en una fila o columna y controla su alineación.
display: flex;
justify-content: center;02 — Vista previa
Obsérvalo en movimiento
Desplázate dentro de la ventana. La barra oscura permanece fija, el menú se pega bajo ella y el logo conserva su posición dentro del hero.
1. Haz scroll en la vista
2. Pulsa los enlaces del menú
3. Pasa el ratón por el logo
03 — Declaraciones clave
De la intención visual a la regla CSS
Sticky, fixed y absolute son valores de
position; flex es un modo de distribución. En cambio,
hero y logo describen el papel de los elementos, no declaraciones CSS.
A Barra
fixedAnclada al viewport
position: fixed saca la barra del flujo normal y la coloca respecto a
la ventana. top: 0 y left: 0 la llevan a la esquina superior;
width: 100% hace que ocupe todo el ancho.
z-index: 1000- La dibuja por encima del resto de capas.
height: var(...)- Define una altura reutilizable y previsible.
body padding-top- Reserva el espacio que la barra ya no ocupa.
B Menú
stickyNormal primero, pegajoso después
El menú conserva su espacio. Solo se pega cuando alcanza
top: var(--altura-barra); así se detiene debajo de la barra fija.
position: sticky- Activa el comportamiento híbrido.
top- Es el umbral que indica dónde se pega.
z-index: 900- Lo mantiene sobre el contenido, pero bajo la barra.
C Contenedor hero
La referencia del logo
position: relative no desplaza el hero: crea la referencia para el logo
absoluto. overflow: hidden recorta lo que sobresalga y Flexbox centra el contenido.
height: 60vh- Relaciona la altura con la pantalla.
min-height- Evita que el hero quede demasiado bajo.
background-size: cover- Cubre la caja sin deformar la imagen.
background-position: center- Mantiene centrada la zona visible.
D Logo
absoluteUna capa dentro del hero
position: absolute saca el logo del flujo. Como el hero está posicionado,
top: 20px y left: 40px se miden desde sus bordes.
width+height- Crean una caja cuadrada.
border-radius: 50%- Convierte esa caja en círculo.
object-fit: cover- Rellena el círculo sin deformar la imagen.
transform- Escala y gira el logo durante el hover.
04 — Flexbox
Distribuir no es posicionar
Flexbox organiza los hijos de un contenedor. No los fija a la ventana ni los extrae del flujo: decide cómo se reparten y alinean dentro de su caja.
.menu-pegajoso ul {
display: flex;
justify-content: center;
gap: 2rem;
}
FixedStickyAbsolute
display: flexConvierte el elemento en contenedor flexible y coloca sus hijos sobre el eje principal.
justify-content: centerCentra los enlaces horizontalmente porque la dirección inicial es una fila.
align-items: centerCentra los hijos en el eje transversal; en una fila, ese eje es vertical.
gap: 2remIntroduce una separación uniforme entre elementos sin márgenes individuales.
05 — Comparación
Referencia, flujo y función
| Técnica | Referencia | ¿Conserva su espacio? | Uso en el ejemplo |
|---|---|---|---|
fixed | Viewport | No | Barra superior permanente |
sticky | Área de desplazamiento | Sí | Menú que se pega al llegar al umbral |
absolute | Ancestro posicionado | No | Logo superpuesto al hero |
flex | Caja del contenedor | Sí | Centrado del hero, barra y menú |
Regla mental útil
fixed mira a la ventana; absolute mira a su ancestro posicionado;
sticky mira al desplazamiento y flex mira a los hijos de una caja.
06 — Código completo
El ejemplo original
Prism identifica etiquetas, atributos, selectores, propiedades y valores. Usa las pestañas para alternar entre los dos archivos.
Cargando HTML…No se ha podido cargar el código. Abre la página mediante HTTP o HTTPS, no directamente como archivo local.
07 — Comprobación
Qué debes saber explicar
- 01
Por qué la barra
fixedexige compensar su altura en elbody. - 02
Por qué el menú
stickyusa comotopla altura de la barra. - 03
Por qué el hero necesita
position: relativepara controlar el logo. - 04
Qué diferencia existe entre alinear con Flexbox y posicionar con
absolute. - 05
Cómo coordinan los valores de
z-indexlas capas superpuestas.