Uso de z-index en el Web Widget (clásico)

El Web Widget de Zendesk (clásico) viene con muchas opciones de configuración y personalización. A veces es necesario especificar el orden de la pila del Web Widget (clásico) en relación con el resto del contenido de la página web. Esto se puede hacer configurando el campo z-indexen la configuración del Web Widget (clásico). Este artículo destaca algunos casos básicos de z-indexpara cambiar la manera en que se organiza el widget con otros elementos en su sitio web.

Nota: Los ejemplos a continuación son código personalizado que no admitimos directamente y que un desarrollador web debe implementar. Si está viendo este artículo y ejemplos de nuestro propio Web Widget, es posible que algunos no se muestren correctamente. Para ver los ejemplos, haga clic enel icono de flecha () en la esquina superior derecha del Web Widget para abrir este artículo en una nueva pestaña del navegador.

Qué es z-index?
Explicación y definición de z-index

Z-index es una propiedad de CSS que se usa para establecer la visibilidad y el posicionamiento del contenido superpuesto. Cuando dos elementos se superponen, la z-indexdeterminará qué elemento aparece encima del otro. El z-indexvalue se puede asignar con un número entero o valores globales como heredar, inicial y no establecido.

Cuando se usan números enteros, la z-indexasignados al índice más alto aparecerán delante de los otros elementos. Por ejemplo, si el contenedor A tiene asignado un z-indexde 2 y al contenedor B se le asigna un valor z-indexde 1, el contenedor A se colocará delante del contenedor B. Cuando se usan valores globales, el elemento tomará la posición asignada en relación al valor de su principal.

¿Cómo funciona? z-indexcon el Web Widget (clásico)?
Configuración z-indexpara su propio widget

Puede haber ocasiones en las que desee que el contenido se muestre delante del Web Widget (clásico), o bien querrá ocultar el Web Widget (clásico) detrás de otro contenido por completo. Aquí es donde se configura z-indexdel Web Widget (Classic) es muy útil.

¿Cómo se configura el z-indexpara mi Web Widget (clásico)?
Dos opciones de configuración z-index

Puede configurar z-indexpara el Web Widget de dos maneras:

1. Utilice la window.zESettingsobjeto. Esto establecerá el z-indexcuando el widget se carga por primera vez. Si desea más información sobre el uso de la window.zESettings , consulte la documentación para desarrolladores aquí.
2. Utilice la API updateSettings. Esto permitirá que z-indexpara actualizarse en tiempo de ejecución. Si desea más información sobre el uso de la API updateSettings, consulte la documentación para desarrolladores aquí.

Nota: Web Widget (clásico) z-indexla configuración predeterminada tiene un índice de 999998, lo que significa que el widget aparecerá en la parte delantera de la pantalla a menos que haya otro objeto z-indexexcede ese número.

Ejemplo usando el objeto window.zESettings
El window.zESettings permite establecer el z-indexal cargar la página

En este ejemplo, configuraremos el z-indexusando el window.zESettingsobjeto. Como recordatorio, window.zESettingssolo se carga cuando se inicia el widget. Para actualizar la z-indexen tiempo de ejecución usando la API updateSettings, consulte los ejemplos más abajo.

Así es como se verá la página antes de los cambios z-indexdel Web Widget (Classic). Como era de esperar, el Web Widget (clásico) aparece además del resto del contenido:

En el ejemplo anterior, z-indexde nuestro elemento contenedor no se ha configurado explícitamente. Eso quiere decir que z-indexEl valor predeterminado del elemento contenedor será automático, que corresponde a 0. Para ocultar el Web Widget (clásico), configure la z-indexvalor inferior a 0 como se muestra aquí:

Ahora, cuando se cargue la página, el Web Widget (clásico) aparecerá detrás del elemento contenedor. Esto se debe a que z-indexEl valor del elemento contenedor es mayor que el valor z-indexdel Web Widget (Classic).

El nuevo z-indexhace que el Web Widget (clásico) aparezca detrás de los otros elementos de la página web.

Ejemplos del uso de la API updateSettings
La API updateSettings le da flexibilidad para hacer cambios en tiempo real

Enestos ejemplos, verá que al modal se le asignó un z-indexde 2. Solo cambiaremos la z-indexdel widget para ocultarlo o mostrarlo al principio de la pantalla.

Ejemplo 1: Ocultar el Web Widget (clásico) detrás del modal

En nuestro primer ejemplo, para ocultar el Web Widget (clásico) detrás del modal, configuramos el z-indexa 1 como se muestra a continuación.

Véalo en acción:

Ejemplo 2: Traer el Web Widget (clásico) al frente del modal

En este ejemplo, queremos que el Web Widget (clásico) se muestre delante del modal para que siga estando accesible en la página. Usaremos zE webWidget una vez más para actualizar la configuración y configurar z-indexa 3. Esto moverá efectivamente la posición del Web Widget (clásico).

Véalo en acción:

Resumen y recursos adicionales
Consulte estos vínculos si desea más información

Como desarrollador web, puede elegir el mejor método para establecer la z-indexdel Web Widget (Classic). El window.zESettings permite establecer el z-indexal cargar la página, mientras que la API updateSettings le da la flexibilidad de hacer cambios en tiempo real. Si desea más información sobre cómo personalizar el widget, consulte lo siguiente:
Personalización avanzada del Web Widget (clásico)
Nuestra comunidad de desarrolladores

restablecer el avance

Descargo de responsabilidad de la traducción: Este artículo ha sido traducido usando software de traducción automática para proporcionar una idea básica del contenido. Se han realizado esfuerzos razonables para proporcionar una traducción exacta, sin embargo, Zendesk no garantiza la exactitud de la traducción.

Si surge alguna pregunta relacionada con la exactitud de la información incluida en el artículo traducido, consulte la versión en inglés del artículo, que es la versión oficial.