Amener un élément au premier plan ou à l'arrière à l'aide de l'index Z

Qu'est-ce que l'indice Z ?

Z-index est une propriété CSS qui contrôle le ordre d'empilement des éléments d'une page web : déterminer quel élément apparaît en premier lorsqu'ils se chevauchent. Une valeur d'index Z élevée signifie que l'élément apparaîtra au premier plan, tandis qu'une valeur inférieure (ou négative) le placera derrière les autres.

Règles clés de l'indice Z

• Valeurs positives (par exemple, 10, 100) apporter un élément dans la pile.
• Valeurs négatives (par exemple, -1) pousser un élément derrière autres.
• Valeurs supérieures apparaissent toujours devant les inférieurs.
• Important: L'index Z s'applique uniquement aux éléments dans la même couche ou section. Il respecte également la hiérarchie parent-enfant, ce qui signifie qu'un élément enfant ne peut pas échapper visuellement au contexte d'empilement de son parent.

Comment ajuster l'index Z dans GemPages

Suivez ces étapes pour contrôler l'index Z d'un élément directement dans l'éditeur GemPages :

Étape 1 : Créer un chevauchement entre les éléments

• Cliquez sur l'élément que vous souhaitez repositionner.
  
• Dans la barre latérale gauche, ouvrez le Avancé languette.
  
• Sous Marges et remplissage, Appliquer un marge négative (par exemple, sur le côté gauche) pour déplacer l'élément afin qu'il chevauche un autre élément dans la même ligne ou section.
• Ouvrez le Avancé languette dans la barre latérale des paramètres. Accédez à Marges et remplissage et appliquer un marge négative sur le côté gauche de l'élément.
• Cela déplace l’élément de sorte qu’il chevauche l’élément situé à sa gauche.
  

Cette étape est nécessaire pour voir l’effet visuel des changements d’index Z.

Étape 2 : Définir la position et l’index Z

• Cliquez sur l'élément qui doit apparaître devant (ou derrière).
• Dans l’onglet Avancé du panneau Paramètres, recherchez la propriété Position.

• Réglez la position sur :
  • Relatif : conserve l'élément dans le flux de mise en page normal mais permet l'empilement.
  • Absolu : le supprime du flux de mise en page et le positionne par rapport à l'ancêtre positionné le plus proche.

• Maintenant, faites défiler jusqu'au champ Z-index :
  • Saisissez une valeur positive (par exemple, 2, 10, 100) pour faire avancer l'élément.
  • Saisissez une valeur négative (par exemple, -1) pour l'envoyer vers l'arrière.

Exemple : choisissez « Relatif » et définissez l’index Z sur 2 pour placer l’élément devant le contenu qui se chevauche.