Sie sind hier: Startseite -> CSS-Grundlagen -> Positionierung -> Schichten

CSS-Grundlagen: Schichten als Positionierung

Schichten: Überlagern der Ebenen

Mit CSS besteht eine weitere Möglichkeit der Positionierung von Elementen darin, dass man sie mit dem z-index ausstattet. Hierbei hat man sich der Überlegung von 3D-Objekten zugewandt. Mit x und y werden Breite und Höhe eines Elementes festgelegt und die z-Achse bietet die Möglichkeit, in drei Dimensionen zu denken bzw. im Falle von CSS zu handeln.

Mit

z-index: 1;

weist man einer Ebene einen z-Faktor zu. Je höher der Faktor ist, umso wichtiger ist die Ebene, also umso eher wird man die Ebene sehen und sie wird geringer eingestufte Ebenen überdecken. Bei vielen Webseiten wird man diese Technik der Schichten nicht brauchen, aber es kann sehr wohl Situationen geben, in denen die Technik ein wichtiges Werkzeug darstellt.

Besonders wenn es um Werbeeinblendungen geht, kann man sich den z-index zunutze machen, um eine Webseite durch eine Werbeschaltung zu überblenden. Ob man sich damit Freunde macht und ob diese Form der Werbung so effektiv ist, ist eine andere Geschichte und muss individuell beobachtet und diskutiert werden.

Fakt ist, dass, wenn zwei Ebenen so definiert werden:

Ebene 1: z-index: 1;
Ebene 2: z-index: 2;

dass die zweite Ebene, sollten sich die Ebenen überschneiden, über der ersten liegt. Der höhere z-Wert hat immer höhere Priorität als der geringere Wert.

Übersicht der Unterseiten

Beispiel: z-index

Informationen über ein praktisches CSS-Beispiel für die Verwendung des z-index und der Schichten, um Ebenen zu überlagern.

Zurück zum Hauptthema

Übersicht Positionierung

Startseite CSS-Grundlagen