nicht angemeldet
Frage zum Wiki-Artikel „Grid-Items“
Gunnar Bittersmann
Rolf B
Matthias ScharwiesSollte nicht (hier im Arikel?) erwähnt werden, daß Grid- und Flex eigene Stapelkontexte eröffnen. Und daß deshalb deren Kindern um so weiter „vorne“ liegen, je weiter „hinten“ im Quelltext sie beschrieben werden. D. h.: ein weiter vorne eingefügtes Objekt, ob nun Kind von grid / flex oder auch nicht, liegt immer hinter jedem anderen, später eingefügten, Element der Seite. Da hilft auch ein „z-index: infinity“ kein Stück weiter.
-
@@nix
Sollte nicht (hier im Arikel?) erwähnt werden, daß Grid- und Flex eigene Stapelkontexte eröffnen. Und daß deshalb deren Kindern um so weiter „vorne“ liegen, je weiter „hinten“ im Quelltext sie beschrieben werden. D. h.: ein weiter vorne eingefügtes Objekt, ob nun Kind von grid / flex oder auch nicht, liegt immer hinter jedem anderen, später eingefügten, Element der Seite. Da hilft auch ein „z-index: infinity“ kein Stück weiter.
Falsch.
Siehe Codepen: Die blaue Box kommt im DOM nach der grünen. Die grüne wird mit
z-indexin den Vordergrund geholt.🖖 Живіть довго і процвітайте
--
Ad astra per aspera-
Nanu? Hatte ich da nicht schon geantwortet? Egal: so lange es um ein Grid oder Flex geht: ja: aber nicht, wenn davon welche nebeneinander erscheinen. Ungefähr so:
body, article { display: grid; … } aside { display: flex; … } section { display: grid; … } … <body> … <article> … </article> <aside> … <section> … </section> … </aside> … </body>Die stapeln ihre Inhalte und treten gegeneinander auf die Füße. Elemente, die „ins Feindliche Gebiet“ geraten, aus ihrem Heimatbereich ausbrechen, liegen dann eben auch mit größerem z-index schnell hinter anderen. Sogar solchen, die z. B.
z-index: -100;im Banner führen.-
@@nix
Ungefähr so:
Ich hab null Bock zu versuchen, deinen halbgar hingerotzten Gedankenfäden zu folgen. Wenn du was sagen möchtest, bitte mit vollständigen nachvollziehbaren Beispielen.
🖖 Живіть довго і процвітайте
--
Ad astra per aspera-
Wenn du was sagen möchtest, bitte mit vollständigen nachvollziehbaren Beispielen.
Beispiele? Sind doch überbewertet!
Ansonsten: (anscheinend) innerhalb eines Grid oder Flex „funktioniert“
z-index. Aber: sie legen anscheinend einen Layer an. Also wenn die Kinder eines Grid/Flex selber Grid/Flex sind, überdecken sie (deren Kinder?) sich nur innerhalb ihres eigenen Elements gemäß z-index. Aber der z-index eines Geschwister-Elements interessiert sie nicht. Und wer oben, wer unten zu liegen kommt, wird durch die Reihenfolge im Quelltext bestimmt. Auch das Zuweisen eines z-index an die einzelnen Kind-Grid/Flex-Container ändert daran (jedenfalls in Safari und Firefox) nichts.Lediglich dann, wenn das Überlagern der Kind-Elemente durch eine transition geschieht, liegen sie – vorübergehend und meist „flimmernd&zappelnd“ oben, tauchen aber beim Ende der transition sofort in die Höhe, welche die (vermuteten) Layer erzwingen..
-
-
-
-
Hallo nix,
wie oft müssen wir Dich noch darum bitten? Wenn Dinge bei Dir nicht funktionieren, mach ein Live-Beispiel (codepen, jsfiddle, etc etc etc) und verlinke es. Das erspart uns die Spekulation über Ursachen.
Zugegeben, wenn Du eine SVG Datei mit url() einbinden willst, ist das nicht so einfach. Aber dafür kann man dann im Zweifel auch Demo-SVGs aus Wikimedia Commons heranziehen.
Zum Thema:
Flex- und Grid-Items bilden dann und nur dann einen Stapelkontext, wenn sie einen z-index ungleich
autohaben. Das habe ich im Wiki mal angemerkt.Hast Du vielleicht den z-index so gesetzt, dass er auf alle Grid-Items wirkt?
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo nix,
wie oft müssen wir Dich noch darum bitten? Wenn Dinge bei Dir nicht funktionieren, mach ein Live-Beispiel (codepen, jsfiddle, etc etc etc) und verlinke es. Das erspart uns die Spekulation über Ursachen.
Zugegeben, wenn Du eine SVG Datei mit url() einbinden willst, ist das nicht so einfach. Aber dafür kann man dann im Zweifel auch Demo-SVGs aus Wikimedia Commons heranziehen.
Siehe diese Antwort:
hier:
Zum Thema:
Flex- und Grid-Items bilden dann und nur dann einen Stapelkontext, wenn sie einen z-index ungleich
autohaben. Das habe ich im Wiki mal angemerkt.Das müsstest du dann aber auch bei floats, bei Listen und sonstwo anmerken. 😀
Hast Du vielleicht den z-index so gesetzt, dass er auf alle Grid-Items wirkt?
Siehe diese Antwort
Das hat @Gunnar Bittersmann in den falschen Hals gekriegt. Ich kann aber nur noch einmal betonen, dass man CSS nur sparsam und gezielt einsetzen sollte.
Ich verwende z-index nur bei Dropdown-Menüs und kann mir nur vorstellen/spekulieren, dass der eventuelle Einsatz hier ein untaugliches Mittel sein könnte, einen anderen Fehler ausbügeln zu wollen.
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
@@Matthias Scharwies
Das hat @Gunnar Bittersmann in den falschen Hals gekriegt.
?? Hab ich?
🖖 Живіть довго і процвітайте
--
Ad astra per aspera
-
-