Warum werden bei Vollbildmodus HTML Elemente trotz höherem z-index verdeckt?

[ebody]

Hallo,

es geht um die Google Maps Api, aber vielleicht hängt das Problem gar nicht speziell damit zusammen...Ich habe ein HTML Element als Kontrollelement hinzugefügt.

Zudem kann ich über ein weiteres hinzugefügtes Kontrollelement zwischen Karte und Streetview hin und her schalten.

Klicke ich in Streetview auf Vollbild, wird mein Kontrollelement verdeckt. Es ist im DOM und es hat einen höheren z-index als das Element was es überdeckt.

Was passiert generell, wenn Vollbildmodus im Browser (Google Chrome) aktiviert wird? Ist diese Frage der richtige Ansatz/Weg, um das Problem evtl. zu lösen.

Hat jemand eine Idee, warum das HTML Element verdeckt wird?

Gruß ebody

[JürgenB]

Hallo,

ich habe mit Leaflet ein ähnliches Problem. Wenn ich das richtig verstanden habe, ist der z-Index nicht dokumentenweit gültig, sondern bezieht sich auf das nächste absolut (?) positionierte Element.

Gruß
Jürgen

[klawischnigg]

Hi there,

ich habe mit Leaflet ein ähnliches Problem. Wenn ich das richtig verstanden habe, ist der z-Index nicht dokumentenweit gültig, sondern bezieht sich auf das nächste absolut (?) positionierte Element.

Nein, der z-Index ist sehr wohl dokumentenweit gültig, aber er ist nur für von "static" abweichende, also für nicht defaultmäßige Positionierungen relevant...

[JürgenB]

Hallo,

ich habe das noch nicht richtig verstanden. Es gibt da einen „Stacking Context“, siehe z.B. https://coder-coder.com/z-index-isnt-working/ oder https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Gruß
Jürgen

[klawischnigg]

Hi there,

ich habe das noch nicht richtig verstanden. Es gibt da einen „Stacking Context“, siehe z.B. https://coder-coder.com/z-index-isnt-working/ oder https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Ja, da ist es eh gut beschrieben. Der "stacking context" bei nicht irgendwie "besonders" positionierten Elementen ergibt sich einfach aus der Reihenfolge ihres Aufrufs.

Bei anders positionierten Elementen verhält es sich wie bei den Positionen (idR also "top:" und "left:") - ein zB in einem anders als "static" positioniertem Div-Element seinerseits anders positioniertes Div bezieht sich sowohl was die die Lage im Dokument als auch seinen z-Index betrifft auf das Elternelement. Das ist der Kontext und das ist ja auch irgendwie logisch. Mit dem wie Du geschrieben hast "nächsten" Element hat es nur insoferne zu tun, als das sehr häufig auch das Elternelement ist, auf den sich das (unter den gegebenen Voraussetzungen) bezieht. Also, ein Element mit z-Index 100 kann unter einem z-Index 50 liegen, wenn das Elternelement einen z-Index 25 hat...😉

[ebody]

Ich habe hier eine Lösung für mein beschriebenes Problem gefunden. So 100% kann ich es aber alles noch nicht und zu dieser Stunde nachvollziehen.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Laut der Lösung, setzt Google Maps eines seiner eigenen inneren Divs in den Vollbildmodus.

#map
 #innerMap
#meinElement

Relevant dürfte nur der z-index von #map und #meinElement sein. Wird #innerMap auf Vollbild gesetzt und #meinElement hat einen höheren z-index als #map, müsste #meinElement doch angezeigt werden oder?

Ich hatte auch die Reihenfolge der HTML Elemente mal geändert, was aber auch nichts bewirkt hat.

#meinElement
#map
 #innerMap

Gruß ebody

[klawischnigg]

Hi there,

Laut der Lösung, setzt Google Maps eines seiner eigenen inneren Divs in den Vollbildmodus.

#map
 #innerMap
#meinElement

Relevant dürfte nur der z-index von #map und #meinElement sein. Wird #innerMap auf Vollbild gesetzt und #meinElement hat einen höheren z-index als #map, müsste #meinElement doch angezeigt werden oder?

Hängt von der Positionierungsart von #map ab. Wenn #map die "normale" Positionierungsart "static" hat, dann kannst Du Dein #meinElement auf z-Index achthundertzwölfmilliarden setzen und wirst nichts sehen.

Nachdem ich aber davon ausgehe, daß Du Dein Element exakt platzieren kannst stellt sich die Frage, was das Elternelement ist. Ob sich Dein #meinElement am body orientiert oder an #map oder an #innerMap. Ich denke halt, bei Google-Maps etc. wird schon sehr viel getrickst, damit es so funktioniert, wie es soll. Die legen da Schichten um Schichten und was weiß ich noch übereinander. Kann schon sein, daß man da mit einem Element irgendwo zwischen die Layer gerät😉.

Kann man sich das irgendwo anschauen? Dreieinhalb Augen sehen vielleicht mehr als zwei.

Ich hatte auch die Reihenfolge der HTML Elemente mal geändert, was aber auch nichts bewirkt hat.

#meinElement
#map
 #innerMap

Naja, das kann nicht funktionieren, weil sich da alles über Dein #meinElement legt😉.

[Matthias Apsel]

Hallo JürgenB,

ich habe mit Leaflet ein ähnliches Problem. Wenn ich das richtig verstanden habe, ist der z-Index nicht dokumentenweit gültig, sondern bezieht sich auf das nächste absolut (?) positionierte Element.

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/z-index#Stapelkontext

Bis demnächst
Matthias