Traer un elemento al frente o atrás usando Z-Index

¿Qué es el índice Z?

El índice Z es una propiedad CSS que controla el orden de apilamiento De elementos en una página web: determina qué elemento aparece en primer plano cuando se superponen. Un valor de índice Z alto significa que el elemento aparecerá al frente, mientras que un valor bajo (o negativo) lo coloca detrás de los demás.

Reglas clave del índice Z

• Valores positivos (p. ej., 10, 100) traer un elemento HACIA EL FUTURO en la pila.
• Valores negativos (por ejemplo, -1) empujar un elemento detrás de otros.
• Valores más altos Siempre aparecen delante de los inferiores.
• Importante:El índice Z solo se aplica a los elementos dentro de la misma capa o sección. También respeta la jerarquía padre-hijo, lo que significa que un elemento secundario no puede escapar visualmente del contexto de apilamiento de su padre.

Cómo ajustar el índice Z en GemPages

Siga estos pasos para controlar el índice Z de un elemento directamente en el editor de GemPages:

Paso 1: Crear superposición entre elementos

• Haga clic en el elemento que desea reposicionar.
  
• En la barra lateral izquierda, abra el Avanzado .
  
• En Márgenes y relleno, aplicar un margen negativo (por ejemplo, en el lado izquierdo) para mover el elemento de modo que se superponga a otro elemento en la misma fila o sección.
• Abra la Avanzado . Puede En la barra lateral de configuración. Navega a Márgenes y relleno y aplicar un margen negativo en el lado izquierdo del elemento.
• Esto mueve el elemento para que se superponga con el elemento situado a su izquierda.
  

Este paso es necesario para ver el efecto visual de los cambios del índice Z.

Paso 2: Establezca la posición y el índice Z

• Haga clic en el elemento que debe aparecer delante (o detrás).
• En la pestaña Avanzadas del panel Configuración, busque la propiedad Posición.

• Establezca la posición en:
  • Relativo: mantiene el elemento en el flujo de diseño normal pero permite el apilamiento.
  • Absoluto: lo elimina del flujo de diseño y lo posiciona en relación con el ancestro posicionado más cercano.

• Ahora, desplácese hacia abajo hasta el campo de índice Z:
  • Introduzca un valor positivo (por ejemplo, 2, 10, 100) para traer el elemento hacia adelante.
  • Introduzca un valor negativo (por ejemplo, -1) para enviarlo hacia atrás.

Ejemplo: elija “Relativo” y configure el índice Z en 2 para colocar el elemento delante del contenido superpuesto.