HTML/CSS: Warum stimmt meine div-Reihenfolge nicht?

...komplette Frage anzeigen

3 Antworten

Hallo

Bei solchen Problemen sollte genau darauf geachtet werden die Begrifflichkeiten einheitlich zu verwenden.

Bei Reihenfolge muss auch die die Achse eindeutig bestimmt werden. Bei Webseiten kann dies entweder

a) von links nach rechts sein (x-Achse)

b) von oben nach unten (y-Achse)

c) von hinten nach vorne (z-Achse).

Der z-index bezieht sich nur auf die z-Achse. Also wenn zum Beispiel Bilder gestapelt angezeigt werden. Das vorderste komplett und die anderen dahinter nur teilweise sichtbar oder komplett vom vordersten verdeckt. Deshalb auch die Bezeichnung z-index.

Deiner Beschreibung nach geht es dir aber wohl eher um die Reihenfolge in der x- oder y-Achse. Dafür ist z-index jedoch weder gedacht noch geeignet.

So eine Änderung der Reihenfolge war in HTML und CSS bis vor einigen Jahren überhaupt nicht vorgesehen und deshalb nur über mehr oder weniger sinnvolle Tricks machbar. Dafür wurden häufig float oder position mißbraucht, was aber in der Regel Probleme an anderer Stelle mit sich brachte.

Um den Webseitenerstellern dafür (und für einige andere Probleme) ein Werkzeug an die Hand zu geben wurde das Flexbox-Modell erdacht und eingeführt. Bei Flexbox heißt die CSS-Regel dafür order.

Bei der Erstellung des Quelltextes muss natürlich darauf geachtet werden das Flexbox wie gewünscht funktionieren kann. Das ist in der Regel aber kein Problem.

Gruss

MrMurphy

Antwort bewerten Vielen Dank für Deine Bewertung

die zuerst aufgeführte Div-Box vor der, die im HTML-Code danach aufgeführt ist

Ja, das ist doch richtig. Was oben steht kommt erst, was drunter steht, oder rechts daneben, kommt dann. Es sei denn, man hat es mit float oder sonst einer Anweisung, anders bestimmt.

Antwort bewerten Vielen Dank für Deine Bewertung

Du schreibst dass das div was zu erst Code steht auch zu erst angezeigt wird - meinst du genau das Gegenteil?

PS: Code nie hier auf gf posten. Der ist dann entweder weg oder keiner kanns lesen...

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?