Kapitel der order -Eigenschaft in CSS flexbox sagt:
Absolut positionierte Kinder eines Flex-Containers nehmen nicht am Flex-Layout teil, sondern werden zusammen mit allen Flex-Element-Kindern neu geordnet.
Ich dachte, order auf absolut positionierten Kindern eines Flex-Containers würde einander aufstellen und ich versuchte es wie folgt:
Ich habe die order der zwei Kinder geändert:
und ich habe die erste Runde nicht über die zweite gesehen. Ich frage mich, was bedeutet Ordnung für absolut positionierte Kinder?
Die Aussage, die Sie aus der Spezifikation zitiert haben:
Absolut positionierte Kinder eines Flex-Containers nehmen nicht teil in Flex-Layout, aber sind zusammen mit jedem Flex-Artikel neu geordnet Kinder.
... existiert in der Property-Definition order nicht. Es ist am Ende der Spezifikation im Abschnitt Klarstellungen enthalten.
Trotzdem sagt die order -Definition das:
Gilt für: Flex-Elemente und absolut positionierte Flex-Kinder Container
Aber das ist alles, was die Definition über absolut positionierte Kinder eines Flex-Containers aussagt. Es gibt keine weitere Anleitung oder Klärung.
Daher haben Browser-Hersteller ein beträchtliches Ermessen bei der Implementierung dieser Funktion. Und es scheint, dass die großen Browser noch nicht einmal mit der Implementierung begonnen haben, wie Tests zeigen , dass order nichts für abspos-Kinder von tut ein flexibler Behälter. Getestet in Chrome, FF, IE11 und Edge.
Hier finden Sie einen interessanten Kommentar aus einer verwandten Frage :
Ich halte dies nicht für eine legitime Lösung, aber wenn ich nach dem Laden der Seite
position:absolutemit etwas Javascript hinzufüge, anstatt es in der CSS-Datei zu speichern, funktioniertorderwie erwartet
Die Verwendung von position: absolute für ein Flexbox-Kind macht wenig Sinn, da es einfach den Flex-Child-Status dieses Elements aufhebt. In Ihrem Beispiel werden die beiden untergeordneten Elemente einfach so platziert, wie sie ohne einen Flex-Container wären: Da beide nicht die Einstellungen oben / links / rechts / unten haben, werden sie beide in der oberen linken oberen Ecke platziert von einander in der Reihenfolge, in der sie im Code erscheinen - der letztere über dem früheren.
Die Parameter order haben keinen Einfluss mehr, da diese Elemente keine Flex-Items mehr sind und order nur für "echte" Flex-Items gilt.
Sieh dir mein Snippet an: Ich habe nur das erste und das zweite Div ausgetauscht (so dass du deinen ganzen anderen Code behalten hast), jetzt ist das zweite div über dem ersten div.
HINZUFÜGEN NACH KOMMENTAREN von Michael_B:
Hier ist ein weiteres Snippet mit zwei zusätzlichen "echten" Flex-Items. Wenn alle Geschwister order -Parameter haben, betrifft dies die "echten" Flex-Items, aber nicht die absolut positionierten Items, die einfach in der Reihenfolge, in der sie im Code erscheinen, und auch darüber platziert werden der Flex-Gegenstände.
Tags und Links css css3 css-position flexbox