Trazer um elemento para a frente ou para trás usando o Z-Index

O que é Z-index?

Z-index é uma propriedade CSS que controla o ordem de empilhamento de elementos em uma página da web — determinando qual elemento aparece no topo quando há sobreposição. Um valor de índice Z mais alto significa que o elemento aparecerá na frente, enquanto um valor mais baixo (ou negativo) o coloca atrás dos demais.

Regras principais do Z-index

• Valores positivos (por exemplo, 10, 100) trazer um elemento para a frente na pilha.
• Valores negativos (por exemplo, -1) empurra um elemento atrás outras.
• valores mais altos sempre aparecem na frente dos inferiores.
• importante: O índice Z se aplica somente a elementos dentro da mesma camada ou seção. Também respeita a hierarquia pai-filho, o que significa que um elemento filho não pode escapar visualmente do contexto de empilhamento de seu pai.

Como ajustar o Z-index em GemPages

Siga estas etapas para controlar o índice Z de um elemento diretamente no Editor GemPages:

Etapa 1: criar sobreposição entre elementos

• Clique no elemento que você deseja reposicionar.
  
• Na barra lateral esquerda, abra o Avançado aba.
  
• Debaixo Margens e preenchimento, Aplicar um margem negativa (por exemplo, no lado esquerdo) para mover o elemento de modo que ele se sobreponha a outro elemento na mesma linha ou seção.
• Abra o Avançado aba na barra lateral de configurações. Navegue até Margens e preenchimento e aplique um margem negativa no lado esquerdo do elemento.
• Isso move o elemento para que ele se sobreponha ao elemento à sua esquerda.
  

Esta etapa é necessária para ver o efeito visual das alterações do índice Z.

Etapa 2: Defina a posição e o índice Z

• Clique no elemento que deve aparecer na frente (ou atrás).
• Na guia Avançado do painel Configurações, localize a propriedade Posição.

• Defina a posição para:
  • Relativo: mantém o elemento no fluxo normal do layout, mas permite empilhamento.
  • Absoluto: remove-o do fluxo de layout e o posiciona em relação ao ancestral posicionado mais próximo.

• Agora, role para baixo até o campo Z-index:
  • Insira um valor positivo (por exemplo, 2, 10, 100) para trazer o elemento para a frente.
  • Insira um valor negativo (por exemplo, -1) para enviá-lo para trás.

Exemplo: Escolha “Relativo” e defina o índice Z como 2 para colocar o elemento na frente do conteúdo sobreposto.