Eine der Herausforderungen bei der Verwendung der CSS-Positionierung für das Seitenlayout besteht darin, dass einige Ihrer Elemente andere Elemente überlappen können. Dies funktioniert gut, wenn Sie möchten, dass das letzte Element im HTML-Element oben angezeigt wird. Was ist, wenn Sie dies nicht tun möchten, oder was ist, wenn Elemente vorhanden sein sollen, die sich derzeit nicht mit anderen überlappen, weil das Design dieses "geschichtete" Erscheinungsbild erfordert? ? Um die Überlappung von Elementen zu ändern, müssen Sie die Eigenschaft von CSS verwenden.
Wenn Sie Grafiktools in Word und PowerPoint oder einen stabileren Bildeditor wie Adobe Photoshop verwendet haben, ist die Wahrscheinlichkeit groß, dass Sie so etwas wie z-index in Aktion sehen. In diesen Programmen können Sie die von Ihnen gezeichneten Objekte hervorheben und eine Option auswählen, mit der Sie bestimmte Elemente Ihres Dokuments „Nach hinten verschieben“ oder „In den Vordergrund bringen“ können. In Photoshop stehen Ihnen diese Funktionen nicht zur Verfügung. Sie haben jedoch den Bereich "Layer" des Programms. Sie können festlegen, wo ein Element auf die Zeichenfläche fällt, indem Sie diese Layer neu anordnen. In beiden Beispielen legen Sie im Wesentlichen den Z-Index dieser Objekte fest.
Was ist der Z-Index?
Wenn Sie die CSS-Positionierung verwenden, um Elemente auf der Seite zu positionieren, müssen Sie in drei Dimensionen denken. Es gibt zwei Standardmaße: links / rechts und oben / unten. Der Index von links nach rechts wird als x-Index bezeichnet, während der Index von oben nach unten den y-Index darstellt. Mit diesen beiden Indizes positionieren Sie Elemente horizontal oder vertikal.
Wenn es um Webdesign geht, gibt es auch die Stapelreihenfolge der Seite. Jedes Element auf der Seite kann über oder unter einem anderen Element liegen. Die z-index-Eigenschaft bestimmt, wo sich jedes Element im Stapel befindet. Wenn x-Index und y-Index die horizontalen und vertikalen Linien sind, dann ist der z-Index die Tiefe der Seite, im Wesentlichen die 3. Dimension.
Stellen Sie sich die Elemente auf einer Webseite als Papierstücke und die Webseite selbst als Collage vor. Wo Sie das Papier ablegen, hängt von der Positionierung ab und wie viel davon von den anderen Elementen abgedeckt wird, ist der Z-Index.
- Der z-Index ist eine Zahl, entweder positiv (z. B. 100) oder negativ (z. B. -100).
- Der Standard-Z-Index ist 0.
Das Element mit dem höchsten Z-Index befindet sich oben, gefolgt vom nächsthöheren usw. bis zum niedrigsten Z-Index. Wenn zwei Elemente den gleichen Z-Index-Wert haben (oder nicht definiert ist, dh der Standardwert 0 verwendet wird), werden sie vom Browser in der Reihenfolge abgelegt, in der sie im HTML-Code angezeigt werden.
So verwenden Sie den Z-Index
Geben Sie jedem Element, das Sie in Ihrem Stack wünschen, einen anderen Z-Index-Wert. Zum Beispiel, wenn Sie fünf verschiedene Elemente haben:
- Element A - Z-Index von -25
- Element B - z-Index von 82
- Element C - Z-Index nicht gesetzt
- Element D - z-Index von 10
- Element E - z-Index von -3
Sie werden in der folgenden Reihenfolge gestapelt:
- Element B
- Element D
- Element C
- Element E
- Element A
Es wird empfohlen, sehr unterschiedliche Z-Index-Werte zu verwenden, um Ihre Elemente zu stapeln. Wenn Sie der Seite später weitere Elemente hinzufügen, können Sie sie einlagern, ohne die Z-Index-Werte aller anderen Elemente anpassen zu müssen. Zum Beispiel:
- 100 für Ihr oberstes Element
- 0 für dein mittleres Element
- -100 für dein unteres Element
Sie können auch zwei Elementen den gleichen Z-Indexwert zuweisen. Wenn diese Elemente gestapelt sind, werden sie in der Reihenfolge angezeigt, in der sie im HTML-Code geschrieben sind, wobei das letzte Element oben angezeigt wird.
Eine Anmerkung: Damit ein Element die z-index-Eigenschaft effektiv verwenden kann, muss es ein Blockelement sein oder eine Anzeige von "block" oder "inline-block" in Ihrer CSS-Datei verwenden.
