> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Cómo solucionar que el banner quede oculto detrás de elementos del tema (nueva versión)

### Descripción general

El banner se renderiza como el componente web `pandectes-cmp`. El CSS del tema no le da estilo de la misma forma que al elemento `#pandectes-banner` del banner Legacy.

Los encabezados fijos, las barras de anuncios, los botones de chat y algunas apps usan un **z-index** muy alto. Si quedan por encima del banner, los visitantes no pueden hacer clic en Accept ni en Decline.

En el nuevo banner, aumenta el orden de apilamiento en **Cookie banner > Style** (surfaces / z-index). El valor máximo es `2147483647`.

||| **Nuevo banner.** Para tiendas con la insignia **New version** en **Cookie banner**. Si usas el banner Legacy, consulta [How to switch to the new banner or switch back to the previous version](/es/article/como-cambiar-al-nuevo-banner-o-volver-a-la-version-anterior-1wiw894/).

### Antes de empezar

* Confirma que el banner está activado (o activado para administradores) y que **Pandectes Core** está activado en el tema.
* Reproduce el problema en la tienda, no solo en la vista previa de la app, porque la interfaz de la vista previa es distinta del tema real.

### Aumenta el z-index en Style

1. Abre **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Ve a **Cookie banner > Style**.
3. Busca surfaces / **z-index**.
4. Introduce un valor mayor que el del elemento que se superpone (a menudo `999999` o el máximo `2147483647`).
5. Haz clic en Save.
6. Actualiza la tienda (actualización forzada) y prueba de nuevo Accept / Decline.

![Controles de Surfaces, incluida la profundidad de apilamiento (z-index)](https://images.pandect.es/knowledge-base/how-to-fix-the-banner-hiding-behind-theme-elements-new-version-2.png =900xauto)

### Si Style no es suficiente

Añade una regla en **Style > Custom styling**. Limítala al componente web. Consulta [Custom styling with CSS](/es/article/estilos-personalizados-con-css-1b5e4gk/).

Ejemplo:

```css
pandectes-cmp {
  z-index: 2147483647;
}
```

### Otras comprobaciones

* En móvil, una **Bar** inferior puede quedar debajo de una barra fija de añadir al carrito. Cambia la posición en móvil o usa una sobrescritura para móvil. Consulta [How to use different banner layouts on mobile and desktop (New Version)](/es/article/como-usar-disenos-de-banner-diferentes-en-movil-y-en-escritorio-nueva-version-1tx7ud5/).
* Los widgets de chat suelen usar un z-index alto. Mueve el **consent widget** a la esquina opuesta. Consulta [How to enable and customize the Consent widget (New Version)](/es/article/como-activar-y-personalizar-el-widget-de-consentimiento-nueva-version-14aenov/).
* Si los botones no responden en absoluto en iPhone, puede que un script del tema esté capturando los toques. Consulta [The banner or the application, in general, is not working, what can I do?](/es/article/el-banner-o-la-aplicacion-en-general-no-funciona-que-puedo-hacer-cj2vc4/).

### Artículos relacionados

* [How to customize banner style, colors, logos, and buttons (New Version)](/es/article/como-personalizar-el-estilo-los-colores-los-logotipos-y-los-botones-del-banner-nueva-version-oh67be/)
* [My banner is not showing up: Troubleshooting](/es/article/mi-banner-no-aparece-solucion-de-problemas-1s6gq2s/)