Visão geral
O Zendesk Web Widget (clássico) vem com muitas configurações e opções de personalização. Às vezes, você precisará especificar a ordem de pilha do Web Widget (clássico) em relação aos outros conteúdos em sua página da web. Você pode fazer isso definindo a z-index
nas configurações do Web Widget (clássico) .
Este artigo destaca alguns casos básicos de z-index
para alterar como seu widget é organizado em relação a outros elementos em seu site.
O que é z-index
?
Z-index
é uma propriedade CSS usada para definir a visibilidade e o posicionamento do conteúdo sobreposto. Quando dois elementos se sobrepõem, o z-index
determina qual elemento aparece em cima do outro. O z-index
O valor pode ser atribuído com um número inteiro ou valores globais, como herança, inicial e não definido.
Ao usar números inteiros, o valor do elemento z-index
atribuídos ao índice mais alto serão exibidos na frente dos outros elementos. Por exemplo, se o contêiner A receber uma z-index
de 2 e o contêiner B recebe um z-index
de 1, o contêiner A é posicionado na frente do contêiner B. Ao usar valores globais, o elemento assumirá a posição atribuída em relação ao valor de seu pai.
Como é que z-index
relacionados ao Web Widget (clássico)?
Você pode z-index
do Web Widget (clássico) para exibir seu conteúdo na frente do Web Widget (clássico) ou para ocultar totalmente o Web Widget (clássico) atrás de outro conteúdo.
Como configuro o z-index
para meu Web Widget (clássico)?
Você pode definir o z-index
para o seu widget de duas maneiras:
- Use o
window.zESettings
. Isso definirá oz-index
quando o widget for carregado pela primeira vez. Para obter mais informações sobre o uso dowindow.zESettings
, consulte a documentação do desenvolvedor: Referência de configurações. - Use o
updateSettings
API. Isso permitirá que oz-index
sejam atualizados em tempo de execução. Para obter mais informações sobre o uso doupdateSettings
API, consulte a documentação do desenvolvedor: Core API.
z-index
A configuração padrão é um índice de 999998, o que significa que o widget será exibido na frente da tela, a menos que outro objeto z-index
excede esse número.Exemplo de uso do objeto window.zESettings
O window.zESettings
O objeto permite que você defina o z-index
no carregamento da página.
Este exemplo define o z-index
usando o window.zESettings
. Como um lembrete, o window.zESettings
O objeto é carregado apenas quando o widget é inicializado. Como atualizar o z-index
valor em tempo de execução usando o updateSettings
API, consulte os exemplos abaixo.
Esta é a aparência da página antes de qualquer alteração na z-index
valor do Web Widget (clássico). Como esperado, o Web Widget (clássico) aparece sobre nossos outros conteúdos:
No exemplo acima, o z-index
do elemento de contêiner não foi definido explicitamente. Isso significa que o z-index
do elemento de contêiner será padronizado como auto, que corresponde a 0. Para ocultar o Web Widget (clássico), defina a z-index
valor menor que 0, conforme mostrado aqui:
Agora, quando a página é carregada, o Web Widget (clássico) é exibidoatrás do elemento do recipiente. Isso ocorre porque o z-index
valor do elemento de contêiner é maior que o z-index
valor do Web Widget (clássico).
O novo z-index
faz com que o Web Widget (clássico) seja exibido atrás dos outros elementos da página da web.
Exemplos usando a updateSettings
API
O updateSettings
A API oferece flexibilidade para fazer alterações em tempo real
Esses exemplos mostram que o modal recebeu um z-index
de 2. Altere apenas o z-index
do widget para ocultá-lo ou exibi-lo na frente da tela.
Exemplo 1: Ocultação do Web Widget (clássico) por trás do modal
No primeiro exemplo, para ocultar o Web Widget (clássico) atrás do modal, defina a z-index
para 1, conforme mostrado abaixo.
Veja em ação:
Exemplo 2: Colocar o Web Widget (clássico) na frente do modal
Este exemplo mostra como exibir o Web Widget (clássico) na frente do modal para que ele ainda esteja acessível na página. Este exemplo usa novamente o zE webWidget para updateSettings
e defina o z-index
a 3. Isso moverá efetivamente a posição do Web Widget (clássico).
Veja em ação:
Resumo e recursos adicionais
Como desenvolvedor da Web, você pode escolher o melhor método para definir a z-index
valor do seu Web Widget (clássico). O window.zESettings
O objeto permite que você defina o z-index
no carregamento da página, enquanto o updateSettings
A API oferece a você a flexibilidade de fazer alterações em tempo real. Para obter mais informações sobre a personalização do seu widget, consulte este artigo: Personalização avançada do Web Widget (clássico).
Aviso sobre a tradução: este artigo foi traduzido por um software de tradução automática para oferecer a você uma compreensão básica do conteúdo. Medidas razoáveis foram tomadas para fornecer uma tradução precisa, no entanto, a Zendesk não garante a precisão da tradução.
Em caso de dúvidas relacionadas à precisão das informações contidas no artigo traduzido, consulte a versão oficial do artigo em inglês.