Posición fija (fixed) en Divi: guía completa

Hay un momento específico en el diseño de un sitio web en el que te das cuenta de que necesitas la posición fija en Divi: cuando tienes un botón de WhatsApp flotante que desaparece con el scroll, o cuando quieres que una barra de oferta permanezca visible en la parte superior de la pantalla aunque el usuario baje hasta el final de la página. La posición fija es exactamente eso — un elemento que se queda donde tú lo pones sin importar cuánto se desplace el visitante.

En este tutorial te explico cómo funciona, cuándo usarla, cómo aplicarla en Divi paso a paso y los tips que yo aplico en proyectos reales para que no rompa el layout en móvil ni tape elementos importantes en desktop. También te explico la diferencia con la opción Sticky de Divi, porque es una confusión frecuente que puede llevarte a elegir la herramienta equivocada para lo que necesitas.

Los tipos de posición en Divi antes de llegar a fixed

Divi ofrece cuatro tipos de posición para cualquier elemento. Para entender bien la posición fija, conviene tener claros los tres previos:

• Estática: la posición por defecto. El elemento sigue el flujo normal del documento y no responde a las propiedades top, right, bottom ni left.
• Relativa: el elemento mantiene su lugar en el flujo del documento, pero puedes moverlo con top, right, bottom y left relativo a su posición original. También responde a z-index.
• Absoluta: el elemento sale del flujo del documento — los demás elementos actúan como si no existiera — y se posiciona relativo a su contenedor padre posicionado (el ancestro más cercano que tenga posición relativa, absoluta o fija).

La posición fija es similar a la absoluta en que saca al elemento del flujo del documento, pero con una diferencia clave que lo cambia todo.

¿Qué es la posición fija y en qué se diferencia de la absoluta?

Con la posición fija, el elemento se posiciona relativo a la ventana del navegador (el viewport), no al contenedor padre. Eso significa que cuando el usuario hace scroll, el elemento no se mueve — sigue exactamente en el mismo lugar de la pantalla porque su referencia es la ventana, no el documento.

La posición absoluta, en cambio, se posiciona relativa al contenedor padre y sí se desplaza con el scroll si ese padre está dentro del flujo normal de la página. Es la diferencia entre clavar algo a la pared del cuarto (fixed) o pegarlo a una hoja de papel que está en esa pared (absoluta): cuando mueves la hoja, lo pegado a ella se mueve, pero lo clavado a la pared no.

Hay otro punto importante: la posición fija rompe el flujo del documento igual que la absoluta. El resto de los elementos actúan como si el elemento fijo no ocupara espacio. Esto significa que si pones una barra superior fija, tienes que compensar ese espacio manualmente para que el contenido que está debajo no quede tapado.

Consejo: si tu barra fija mide 60px de altura, añade un padding-top: 60px (o un margen superior equivalente) al primer elemento de contenido de la página para que no quede oculto detrás de ella.

Posición fija vs. Sticky en Divi: cuál usar en cada caso

Esta es la confusión más frecuente que veo entre diseñadores que empiezan a trabajar con posicionamiento en Divi. Sticky y fixed no son lo mismo, aunque el resultado visual puede parecer similar a primera vista.

La opción Sticky de Divi (que está en la pestaña Avanzado de cada módulo o sección) es un efecto que se activa al hacer scroll: el elemento se comporta de forma normal en el flujo del documento hasta que el usuario llega a él, y en ese momento se "pega" a una posición fija de la pantalla. Es el comportamiento del encabezado pegajoso clásico — el header que baja contigo cuando empiezas a scrollear.

La posición fixed es diferente: el elemento está fijo en su posición desde el momento en que la página carga, independientemente del scroll. No hay transición ni efecto — simplemente está ahí, siempre, en ese punto de la pantalla.

• Usa Sticky cuando quieras que un elemento aparezca fijo solo después de que el usuario haga scroll pasando ese punto (ej. un header que al principio está "abierto" con logo grande y al bajar se comprime y pega arriba).
• Usa posición fixed cuando quieras que el elemento esté visible desde el primer momento, en todo momento, sin importar la posición del scroll (ej. un botón de WhatsApp que siempre está en la esquina inferior derecha).

🎓 ¿Quieres dominar el posicionamiento y el diseño avanzado en Divi?
El Curso Divi 5 Completo cubre estas opciones de posicionamiento con proyectos reales donde ves exactamente cuándo usar cada una.

Cómo aplicar la posición fija en Divi paso a paso

Aplicar la posición fija en Divi es directo. Aquí te va el proceso que yo sigo:

Paso 1: Seleccionar el elemento y abrir Avanzado

Haz clic en el elemento (módulo, columna, fila o sección) que quieres fijar para abrir sus opciones. Ve a la pestaña Avanzado. Dentro de Avanzado, busca la sección de Posición.

Paso 2: Seleccionar posición fija

En el selector de posición verás las opciones: Estática, Relativa, Absoluta y Fija. Selecciona Fija. En ese momento Divi activa los campos de top, right, bottom y left para que puedas definir exactamente dónde queda el elemento en la pantalla.

Paso 3: Definir la posición con los ejes X e Y

Aquí defines los offsets. Si quieres un botón flotante en la esquina inferior derecha, por ejemplo, configurarías bottom: 30px y right: 30px. Si quieres una barra fija en la parte superior, top: 0 y left: 0, con width: 100%. Divi también tiene un selector de punto de origen que define desde qué esquina del elemento se calculan esos offsets — por defecto es la esquina superior izquierda, pero puedes cambiarlo al centro o cualquier otra esquina.

Paso 4: Configurar el Z-Index

El z-index determina qué elemento queda encima cuando hay superposición. Un elemento fijo casi siempre necesita un z-index alto para que no quede debajo de otros elementos de la página. Yo suelo poner valores como 9999 para elementos fijos críticos (barras de navegación, CTAs flotantes) para asegurarme de que siempre queden visibles.

Consejo: si tienes múltiples elementos fijos en la misma página (por ejemplo, un header fijo y un botón flotante), asigna z-index diferentes y con suficiente margen entre ellos — header en 1000, botón en 1001 — para poder controlar cuál queda encima cuando se superponen.

Casos de uso reales con posición fija

La teoría está bien, pero lo que realmente ayuda es ver cuándo uso esto en proyectos reales.

Barra de oferta fija en tienda online

Uno de los usos más efectivos en e-commerce: una barra delgada en la parte superior de la pantalla con un mensaje de oferta o envío gratis. Esta barra se ve en todo momento del proceso de compra, incluso mientras el usuario navega por categorías o revisa descripciones largas de productos. Para implementarla en Divi, crea una sección de una fila con posición fija, top: 0, left: 0, width: 100% y el z-index suficientemente alto. Luego añade el margen superior equivalente al body o al primer elemento de contenido para compensar.

Sidebar de tabla de contenidos

En posts de blog largos o páginas de venta extensas, una tabla de contenidos fija en la barra lateral izquierda o derecha le da al usuario una referencia de dónde está en la página y le permite saltar entre secciones. La posición fija la mantiene visible en todo momento. Ojo con la altura en este caso — si la tabla de contenidos es más alta que el viewport, necesitas añadir overflow-y: auto y un max-height: 100vh para que sea scrolleable sin salirse de la pantalla.

Botón de WhatsApp flotante

Probablemente el uso más extendido. Un módulo de imagen o botón en la esquina inferior derecha, con posición fija, bottom: 20px, right: 20px, con el ícono de WhatsApp y un enlace a wa.me/tu-número. Tiene un impacto real en la tasa de contacto en sitios de servicios. Lo he implementado en varios proyectos de clientes y la diferencia en consultas entrantes es notable.

Menú vertical tipo app

Si te interesa crear un menú de navegación lateral fijo que se vea como una app móvil, el artículo sobre menú móvil tipo app en WordPress con Divi 5 cubre exactamente ese caso con un tutorial paso a paso.

Tips para que la posición fija funcione bien en móvil

La posición fija en móvil puede volverse problemática rápido si no la ajustas específicamente para pantallas pequeñas. Estos son los tips que aplico siempre:

El caso más común es una barra lateral fija en desktop que en móvil no tiene sentido porque ocupa espacio valioso. La solución es sobreescribir la posición para pantallas pequeñas con CSS adicional:

@media (max-width: 767px) {
  .mi-elemento-fijo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    z-index: auto !important;
  }
}

Con ese CSS, el elemento se comporta de forma normal (flujo del documento) en pantallas menores a 768px y solo aplica la posición fija en tablet y desktop. Puedes añadir esto en el CSS personalizado de la página o en el CSS del tema hijo.

Otro problema frecuente en móvil: los elementos fijos con un ancho definido en píxeles pueden salirse del viewport en pantallas muy pequeñas. Usa siempre porcentajes o vw para el ancho de elementos fijos que deben cubrir toda la pantalla.

🎓 ¿Quieres dominar el diseño avanzado con Divi?
En el Curso Divi 5 Completo cubrimos posicionamiento, responsive design y técnicas avanzadas de layout con proyectos reales que puedes usar como base en tus proyectos de cliente.

Preguntas frecuentes

¿La posición fija funciona en el Theme Builder de Divi?

Sí. Puedes usar posición fija tanto en plantillas del Theme Builder como en páginas regulares de Divi. Es especialmente útil en el Theme Builder para elementos que deben estar fijos en todas las páginas del sitio — como un botón de contacto o una barra de CTA global.

¿Puedo hacer que el elemento desaparezca al hacer scroll más allá de cierto punto?

La posición fija nativa de CSS no tiene esa funcionalidad — permanece visible siempre. Para ocultar un elemento fijo después de cierto punto de scroll necesitas JavaScript o la opción Sticky de Divi, que sí tiene controles de offset de entrada y salida. Si lo que quieres es una barra que aparezca después de X píxeles de scroll y desaparezca antes del footer, la opción Sticky es la correcta para ese caso.

¿Cómo evito que un elemento fijo tape el footer?

La posición fija siempre flota sobre el footer a menos que lo controles con JavaScript. La forma más limpia sin JS es darle al elemento fijo un z-index menor que el del footer y asegurarte de que el footer tenga un position: relative con un z-index mayor. Otra opción es añadir padding inferior al último elemento de contenido igual a la altura del elemento fijo, para que visualmente el footer siempre quede por debajo.

Conclusión

La posición fija en Divi es una de esas herramientas que parece simple pero tiene sus matices: el impacto en el flujo del documento, la diferencia con Sticky, el manejo del z-index y los ajustes necesarios para móvil. Una vez que tienes claros esos cuatro puntos, puedes implementar elementos fijos en cualquier proyecto — barras de oferta, botones flotantes, sidebars de navegación — de forma limpia y sin que rompan el layout en ningún dispositivo.

🎓 ¿Quieres dominar el diseño avanzado con Divi de forma completa?
El Curso Divi 5 Completo te da el sistema completo de posicionamiento, diseño responsive y técnicas avanzadas para proyectos profesionales.