Frage von Ale199, 21

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

Hallo, vielleicht kann mir jemand weiterhelfen. Ich habe folgendes Problem: Bin CSS/HTML-Anfänger. Habe gelernt, dass die Reihenfolge davon abhängt wie sie im HTML-Code steht. Man kann die Reihenfolge zwar durch den z-index ändern, dieser funktioniert aber nur mit position und das wirft bei mir irgendwie alles durcheinander. Drum dachte ich, ich schreibe meine Div-Box einfach hinter die andere Div-Box. Seltsamerweise ist im Browser aber trotzdem die zuerst aufgeführte Div-Box vor der, die im HTML-Code danach aufgeführt ist. Warum? Der Code lautet so:

Trotzdem wird im Browser die "box_bildserie_zeigen_HG" oben angezeigt. Warum?

Danke für Eure Antwort.

Antwort
von MrMurphy, 5

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
von kuechentiger, 5

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
von triopasi, 6

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...

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten