Mit CSS Schichten oder Ebenen anordnen

Per index sortieren

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.

Somit kann man verschiedene Ebenen anlegen, die eigentlich nicht nebeneinander Platz haben, aber wenn man sie überlappen lässt, passt der vorhandene Platz wieder. Also braucht es einen Trick und das ist der index-Zusatz, durch den jede Ebene eine andere Nummer bekommt. Je höher die Nummer, umso mehr bekommt man zu sehen, weil man über den Ebenen mit niedrigerer Indexnummer gezeigt wird.

Ebenen in CSS mit index nutzen

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

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.

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

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.

z-index in der Praxis

Die Technik und Möglichkeit ist nicht neu, aber in der Praxis gibt es nicht so viele Optionen, weil man lieber mit float die Elemente aneinander reiht. Und dass man eine Ebene jetzt über die andere schiebt, sodass diese nicht mehr ganz zu sehen ist, ist wohl als grafische Idee reizvoll, aber für die breite Masse eher nicht interessant.

Außerdem muss man aufpassen. Lange Jahre hat etwa Google mit seinem Werbeprogramm AdSense verboten, dass man den Inhalt verdeckt - etwa mit einer Werbeschaltung. Das ist insofern interessant, als seit dem Jahr 2021 AdSense selbst Werbung schaltet, die sich über den Inhalt legt. Man kann sie zwar wegklicken, aber die eigene Argumentation ist damit zumindest seltsam geworden.

Lesen Sie auch

Die Positionierung ist in CSS eine der Hauptaufgaben und am Anfang nicht immer schlüssig. Margin wird gerne mit Padding verwechselt und nicht jedes float ist richtig gesetzt. Aber wenn man sich eingearbeitet hat, hat man ein mächtiges Werkzeug zur Verfügung. Wichtig ist dabei das Verständnis der Positionsarten.

Ein ganz eigenes Thema ist float, das eigentlich als Textfluss umschrieben werden muss. Doch es regeln das Verhältnis von ganzen Textbereichen oder den Hauptspalten zueinander ebenso.

Ebenfalls sehr oft im Einsatz sind natürlich die Abstände - Abstand vor und nach der Überschrift, vor und nach dem Text sind nur ein paar der Situationen.

Weitere Möglichkeiten bestehen darin, die Breite zu begrenzen oder die Höhe fest anzugeben. Auch die Arbeit mit verschiedenen Schichten oder auch Ebenen mit Indexangabe ist eine Option bei der Positionierung.

Themenseiten

Startseite CSS-Grundlagen

Mit CSS Schichten oder Ebenen anordnen

Per index sortieren

Ebenen in CSS mit index nutzen

z-index in der Praxis

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich