Posicionamiento en CSS: static, relative, absolute, fixed, sticky y z-index

Ya vimos cómo construir layouts con Flexbox y Grid y cómo adaptarlos a distintos tamaños de pantalla. Ahora toca entender cómo posicionar elementos con más precisión dentro de una página.

Para eso CSS ofrece la propiedad position.

El flujo normal del documento

Antes de usar posicionamiento, conviene entender que los elementos HTML normalmente participan del flujo normal del documento.

Eso significa que ocupan espacio y empujan a los elementos siguientes según su tipo y tamaño.

<div class="caja">Caja 1</div>
<div class="caja">Caja 2</div>
<div class="caja">Caja 3</div>

Sin reglas especiales, estas cajas se ubicarán una después de otra.

position: static

static es el valor por defecto.

.caja {
    position: static;
}

El elemento permanece en el flujo normal y propiedades como top, right, bottom y left no tienen efecto.

position: relative

Con relative, el elemento sigue ocupando su lugar original, pero podemos desplazarlo visualmente.

.caja {
    position: relative;
    top: 20px;
    left: 10px;
}

El espacio original del elemento sigue reservado.

top, right, bottom y left

Estas propiedades permiten desplazar un elemento posicionado:

top
right
bottom
left

Su efecto depende del valor de position.

position: absolute

Un elemento con position: absolute sale del flujo normal del documento.

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

Eso significa que deja de reservar espacio en la posición que ocupaba originalmente.

¿Respecto de qué se posiciona un elemento absolute?

Este es uno de los puntos más importantes.

Un elemento con position: absolute se posiciona respecto del ancestro posicionado más cercano.

Por eso es muy frecuente combinar:

.tarjeta {
    position: relative;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

HTML:

<article class="tarjeta">

    <span class="badge">
        Nuevo
    </span>

    <h2>Curso de CSS</h2>

    <p>
        Aprendé diseño web.
    </p>

</article>

En este caso, el badge se posiciona tomando como referencia la tarjeta.

¿Qué pasa si no hay un ancestro posicionado?

Si no encuentra un ancestro con una posición distinta de static, el elemento puede terminar posicionándose respecto de un contenedor superior, normalmente relacionado con el documento.

Por eso suele ser buena práctica definir position: relative en el contenedor que queremos usar como referencia.

Ejemplo: etiqueta sobre una imagen

HTML:

<div class="producto">

    <img src="producto.jpg" alt="Producto">

    <span class="oferta">
        -20%
    </span>

</div>

CSS:

.producto {
    position: relative;
    display: inline-block;
}

.oferta {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0.4rem 0.7rem;
    background-color: red;
    color: white;
    border-radius: 6px;
}

position: fixed

fixed posiciona el elemento respecto del viewport.

El elemento permanece en el mismo lugar aunque hagamos scroll.

.boton-flotante {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

Es frecuente en:

• botones flotantes;
• acciones rápidas;
• barras persistentes;
• botones para volver arriba.

Ejemplo: botón flotante

HTML:

<a href="#inicio" class="boton-flotante">
    ↑
</a>

CSS:

.boton-flotante {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    text-decoration: none;
}

position: sticky

sticky combina características del posicionamiento relativo y fijo.

El elemento se comporta normalmente hasta alcanzar una posición determinada y luego permanece visible mientras su contenedor lo permita.

.cabecera {
    position: sticky;
    top: 0;
}

Ejemplo: cabecera sticky

<header class="cabecera">
    <h1>Club Programador</h1>
</header>

.cabecera {
    position: sticky;
    top: 0;
    background-color: white;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

Cuando hacemos scroll, la cabecera puede permanecer pegada a la parte superior.

Sticky necesita una referencia

Para que sticky funcione, normalmente debemos indicar al menos una posición como:

top: 0;

Además, ciertos valores de overflow en elementos antecesores pueden cambiar o impedir el comportamiento esperado.

z-index

Cuando varios elementos se superponen, necesitamos decidir cuál aparece por encima.

Para eso utilizamos z-index.

.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
}

En términos generales, un valor mayor puede hacer que un elemento aparezca por encima de otro dentro de un contexto de apilamiento compatible.

No alcanza siempre con poner un z-index enorme

Un error común es pensar que:

z-index: 999999;

resolverá cualquier problema.

CSS trabaja con contextos de apilamiento. Un elemento puede quedar limitado por el contexto creado por alguno de sus ancestros.

Por ahora, lo importante es saber que z-index no funciona como una única lista global para toda la página.

Contexto de apilamiento explicado de forma simple

Podemos imaginar distintos grupos o capas independientes.

Un elemento puede tener un z-index alto dentro de su grupo, pero seguir estando por debajo de otro grupo completo.

Propiedades como posicionamiento con z-index, transformaciones y opacidad pueden crear nuevos contextos de apilamiento.

Ejemplo de superposición

.fondo {
    position: absolute;
    z-index: 1;
}

.contenido {
    position: relative;
    z-index: 2;
}

Si ambos pertenecen al mismo contexto de apilamiento, el contenido aparecerá por encima.

Centrar con absolute y transform

Una técnica clásica para centrar un elemento absolutamente posicionado es:

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Hoy muchas situaciones de centrado se resuelven más fácilmente con Flexbox o Grid, pero esta técnica sigue siendo útil en ciertos casos.

Ejemplo: modal básico

HTML:

<div class="overlay">

    <div class="modal">

        <h2>Confirmación</h2>

        <p>
            ¿Deseás continuar?
        </p>

    </div>

</div>

CSS:

.overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal {
    width: 90%;
    max-width: 500px;
    padding: 2rem;
    background-color: white;
    border-radius: 12px;
}

La propiedad inset

inset permite abreviar top, right, bottom y left.

Por ejemplo:

.overlay {
    position: fixed;
    inset: 0;
}

equivale aproximadamente a:

top: 0;
right: 0;
bottom: 0;
left: 0;

Cuándo usar cada tipo de position

static   → comportamiento normal
relative → referencia o pequeño desplazamiento
absolute → posición respecto de un ancestro
fixed    → posición respecto del viewport
sticky   → se fija al hacer scroll dentro de ciertos límites

Position no reemplaza Flexbox ni Grid

Un error frecuente al comenzar es intentar construir todo el layout usando position: absolute.

Para distribuir secciones, columnas, tarjetas o menús, normalmente Flexbox y Grid son mejores herramientas.

absolute resulta especialmente útil para elementos superpuestos o ubicaciones puntuales.

Ejemplo combinado

HTML:

<article class="curso">

    <span class="etiqueta">
        Destacado
    </span>

    <h2>Curso de CSS</h2>

    <p>
        Aprendé CSS paso a paso.
    </p>

    <a href="#">
        Ver curso
    </a>

</article>

CSS:

.curso {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 12px;
}

.etiqueta {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.35rem 0.6rem;
    background-color: #007bff;
    color: white;
    border-radius: 6px;
}

Errores comunes

• usar absolute para construir toda la página;
• olvidar definir position: relative en el contenedor de referencia;
• creer que un elemento absolute sigue reservando espacio;
• usar fixed para elementos grandes que tapan contenido;
• usar sticky sin definir top;
• aumentar z-index indefinidamente sin entender el contexto de apilamiento;
• superponer contenido importante en pantallas pequeñas;
• usar posicionamiento cuando Flexbox o Grid resolverían mejor el problema.

Ejercicio para practicar

Partiendo de:

<article class="producto">

    <span class="nuevo">
        Nuevo
    </span>

    <h2>Curso de CSS</h2>

    <p>
        Guía completa de estilos.
    </p>

</article>

Intentá:

• hacer que .producto sea el contenedor de referencia;
• ubicar la etiqueta .nuevo arriba a la derecha;
• agregar un botón fijo abajo a la derecha de la pantalla;
• crear una cabecera sticky;
• experimentar con z-index para controlar superposiciones.

Qué aprendimos

• flujo normal del documento;
• position: static;
• position: relative;
• position: absolute;
• ancestro posicionado;
• top, right, bottom y left;
• position: fixed;
• position: sticky;
• z-index;
• introducción a contextos de apilamiento;
• inset;
• cuándo conviene usar posicionamiento.

Seguí aprendiendo CSS

La guía anterior es:

Responsive Design en CSS: media queries, breakpoints y mobile-first

El siguiente paso es integrar todo lo aprendido en un proyecto final HTML + CSS:

Proyecto final HTML + CSS: crear una página web completa y responsive →

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal