Bringen Sie ein Element mit Z-Index in den Vordergrund oder Hintergrund

Was ist der Z-Index?

Z-Index ist eine CSS-Eigenschaft, die steuert, Stapelreihenfolge von Elementen auf einer Webseite – bestimmt, welches Element bei überlappenden Elementen oben angezeigt wird. Ein höherer Z-Index-Wert bedeutet, dass das Element vorne angezeigt wird, während ein niedrigerer (oder negativer) Wert es hinter andere Elemente schickt.

Wichtige Regeln des Z-Index

• Positive Werte (zB 10, 100) bringen ein Element im Stapel.
• Negative Werte (zB -1) Push ein Element hinter Andere.
• Höhere Werte erscheinen immer vor den Unteren.
• Wichtig: Z-Index gilt nur für Elemente innerhalb derselben Ebene oder desselben Abschnitts. Es respektiert auch die Eltern-Kind-Hierarchie, was bedeutet, dass ein untergeordnetes Element dem Stapelkontext seines übergeordneten Elements nicht visuell entkommen kann.

So passen Sie den Z-Index in GemPages an

Befolgen Sie diese Schritte, um den Z-Index eines Elements direkt im GemPages-Editor zu steuern:

Schritt 1: Überlappung zwischen Elementen erstellen

• Klicken Sie auf das Element, das Sie neu positionieren möchten.
  
• Öffnen Sie in der linken Seitenleiste die Erweitert Tab.
  
• Der Ränder und Polsterung, bewerben a negative Marge (z. B. auf der linken Seite), um das Element so zu verschieben, dass es ein anderes Element in derselben Zeile oder demselben Abschnitt überlappt.
• Öffnen Sie den Microsoft Store auf Ihrem Windows-PC Erweitert Tab in der Seitenleiste „Einstellungen“. Navigieren Sie zu Ränder und Polsterung und bewerben Sie sich negative Marge auf der linken Seite des Elements.
• Dadurch wird das Element so verschoben, dass es sich mit dem Element links davon überlappt.
  

Dieser Schritt ist notwendig, um die visuelle Auswirkung von Z-Index-Änderungen zu sehen.

Schritt 2: Position und Z-Index festlegen

• Klicken Sie auf das Element, das vorne (oder hinten) erscheinen soll.
• Suchen Sie auf der Registerkarte „Erweitert“ des Einstellungsbereichs die Eigenschaft „Position“.

• Stellen Sie die Position auf eine der folgenden Optionen ein:
  • Relativ: Hält das Element im normalen Layoutfluss, ermöglicht aber das Stapeln.
  • Absolut: Entfernt es aus dem Layoutfluss und positioniert es relativ zum nächstgelegenen positionierten Vorgänger.

• Scrollen Sie nun nach unten zum Z-Index-Feld:
  • Geben Sie einen positiven Wert ein (z. B. 2, 10, 100), um das Element nach vorne zu bringen.
  • Geben Sie einen negativen Wert ein (z. B. -1), um ihn nach hinten zu senden.

Beispiel: Wählen Sie „Relativ“ und setzen Sie den Z-Index auf 2, um das Element vor überlappenden Inhalt zu bringen.