Sie sind hier: Startseite -> CSS-Grundlagen -> Beispiel: z-index

Praktisches CSS-Beispiel für Überlagerung mit z-index

Reihenfolge per Index bestimmen

 
 
 

Code:
Kästchen 1: width: 150px; height: 150px; background-color: #0000ff; position: fixed; top: 100px; left: 200px; z-index: 1;
Kästchen 2: width: 150px; height: 150px; background-color: #ff0000; position: fixed; top: 190px; left: 220px; z-index: 2;
Kästchen 3: width: 150px; height: 150px; background-color: #ff9900; position: fixed; top: 140px; left: 320px; z-index: 3;

Ebenen mit z-index überlagern

Mit dem z-index ist es in CSS möglich, verschiedene Ebenen dazu zu bringen, sich gegenseitig zu überlagern, wobei die Reihenfolge mit der Höhe steigt. Das bedeutet, dass eine Ebene mit höherer Indexzahl über einer Ebene zu finden ist, die eine geringere Indexzahl aufzuweisen hat.


Webhosting mit viel Software bei Alfahosting (Affiliate-Link)


Im aktuellen Fall hat Blau den index 1 und wird von rot mit dem index 2 überlagert. Es folgt aber noch eine dritte Ebene und diese erhält den index 3 und überragt beide anderen. Damit ist es eine realistische Option, verschiedene Elemente auf einer Seite in einer grafischen Überlagerung anzeigen zu lassen. Inwieweit das auch praktisch ist, ist schon wieder eine ganz andere Geschichte und wird wohl nicht so oft eingesetzt werden wie etwa die Aneinanderreihung per float-Festlegungen.

Vor allem gilt es zu überlegen, dass eine solche Lösung für Sehbehinderte kaum brauchbar ist und auch bei Handys mit kleiner Auflösung wird man Mühe haben, sich sinnvoll zu verständigen. Aber zu wissen, dass es diese Möglichkeit gibt, ist schon interessant und könnte bei bestimmten Elementen eingesetzt werden - Schaltflächen zum Beispiel.

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.


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


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

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel