z-index bringt Feld nicht in den Vordergrund - Lösung gefunden

[Linuchs]

Moin,

beim Eintippen einer Postleitzahl oder eines Ortsnamens werden per Ajax passende Vorschläge geholt und angezeigt. Aber der Anzeigebereich kommt nicht in den Vordergrund:

Um das input-Feld lege ich einen relativ positionierten div, in dem platziere ich den Vorschlagsbereich absolute:

<div style="position:relative;z-index:999;" ...>
  <div style="position:absolute;z-index:999;" ...>
    <input ... />
  </div>
</div>

Ich verstehe nicht, ob der relative oder absolute div den z-index braucht. Aber auch bei beiden funktioniert es nicht.

Wie macht man das?

Gruß, Linuchs

Edit: Manchmal kommt man der Lösung näher, indem man das Problem beschreibt. So auch hier, ich muss noch eine Ebene höher:

<form style="position:relative;z-index:5;" ...>
  <div style="position:relative;" ...>
    <div style="position:absolute;" ...>
      <input ... />
    </div>
  </div>
</form>

[Gunnar Bittersmann]

@@Linuchs

Edit: Manchmal kommt man der Lösung näher, indem man das Problem beschreibt. So auch hier, ich muss noch eine Ebene höher:

So richtig nahe komst du, wenn du liest, was dir noch niemand über den z-Index gesagt hat: stacking context.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

ich dachte, ich guck mal was das Wiki dazu schreibt. Der Link auf den Text von Philip Walton ist schon 2014 von Matthias Scharwies dort eingetragen worden.

Aber eins ist wohl zu verbessern. In unserem Wiki steht

Per z-index angeordnete Elemente erzeugen für ihre Kindelemente einen eigenen Stapelkontext.

Walton schreibt, dass das Positionieren einen Stacking-Context erzeugt.

Und CSS 2.1 schreibt, dass ein positioniertes Element, das einen z-index Wert ungleich "auto" hat, einen Stacking-Context erzeugt. Plus opacity. Plus flex-items mit z-index ungleich auto.

Das ist ziemlich übel, wie die Informationen mittlerweile in den Specs zerrissen sind. Offensichtlich sind Flex-Items "positionierte Elemente". Demnach wären Grid-Elemente das auch (guck in die Grid-Spec: Yup!)

Ich editiere mal ein bisschen im Wiki herum.

Rolf

[JürgenB]

Hallo Gunnar,

So richtig nahe komst du, wenn du liest, was dir noch niemand über den z-Index gesagt hat: stacking context.

irgendwie habe ich das mit dem stacking context nicht verstanden. in diesem Pen https://codepen.io/JuergenB/pen/ZEQwdYK soll der Text im grünen Kasten über allem stehen. Ich habe den z-index auf 1000 gesetzt, und mit opacity:.99 einen neuen stacking context aufgemacht, dachte ich zumindestens.

Hat jemand eine Idee, wie ich den grünen Text nach oben bekomme?

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

hier der Stackingcontext (dargestellt als Stapel)

 ----div.blue--------------
  -span---------------------
 ----div.green-------------
 ----div.red---------------
--html--------------------

Da div.green unter div.blue liegt, kannst Du niemals einen Kind-Kontext davon über div.blue heben.

Wenn das span im div.green vor dem div.blue stehen soll, muss der ganze div.green Teil vor div.blue liegen.

Wenn in div.green noch andere Sachen enthalten sind, die hinter div.blue liegen müssen, aber der span im div.green trotzdem über div.blue dargestellt werden soll, dann lautet die Antwort: Geht nicht. Stacking contexts sind atomar, man kann zwischen die Elemente eines Context keine Elemente eines anderen Contexts zwischenschieben.

Rolf

[Gunnar Bittersmann]

@@JürgenB

irgendwie habe ich das mit dem stacking context nicht verstanden. in diesem Pen https://codepen.io/JuergenB/pen/ZEQwdYK soll der Text im grünen Kasten über allem stehen. Ich habe den z-index auf 1000 gesetzt, und mit opacity:.99 einen neuen stacking context aufgemacht, dachte ich zumindestens.

Nö, so nicht. Den stacking context gibt das Vorfahrenelement vor, d.h. für den Grünspan das Grün. Der Grünspan wird innerhalb dieses stacking context in z-Richtung vor bzw. hinter die anderen Elemente in diesem stacking context gebracht.

Der Grünspan weiß nichts von dem stacking context, in welchem sich Rot und Blau befinden, kann also auch nicht vor oder hinter diese gebracht werden.

Das ganze Grün kann nach vorne geholt werden, indem es einen höheren z-Index als Blau verpasst bekommt.

Hat jemand eine Idee, wie ich den grünen Text nach oben bekomme?

Wenn du nur den Grünspan nach vorn holen willst, dann darf er nicht im stacking context von Grün sein, d.h. Grün darf keinen z-Index haben.

Ergänzung: opacity brauchst du nicht. Einen vierstelligen Wert für z-Index auch nicht.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[JürgenB]

Hallo Gunnar,

danke für die Erklärung, auch an Rolf.

Ergänzung: opacity brauchst du nicht. Einen vierstelligen Wert für z-Index auch nicht.

der hohe z-Index war nur als „irgendwas großes“ gedacht.

Das opacity:.99 einen neuen stacking context aufmacht, habe ich in meiner Euphorie, endlich eine Lösung für mein Problem^[1] gefunden zu haben, wohl so verstanden, wie ich es mir wünsche.

Gruß
Jürgen

---

1. Es geht darum, ein von Leaflet angeordnetes Element anders zu stapeln, ohne den ganzen Stapel neu aufschichten zu müssen. Siehe http://test.berkemeier.eu/selfwiki/leaflet/Beispiel_JS-Leaflet3.html: das Popup-Fenster liegt unter dem Kartenwähler, dazu Kartenausschnitt entsprechend verschieben. ↩︎

[Rolf B]

Hallo JürgenB,

mein Problem

ja, da die popup pane Kind der map pane ist, ist der Stapelkontext der Popups Kind der Map. Und die control pane ist kein Kind der map, sondern der große Bruder. Deswegen kommt das kleine Kind nicht dran vorbei...

Rolf

[MudGuard]

Hi,

beim Eintippen einer Postleitzahl oder eines Ortsnamens werden per Ajax passende Vorschläge geholt und angezeigt. Aber der Anzeigebereich kommt nicht in den Vordergrund:

Wäre das nicht ein Fall für datalist?

cu,
Andreas a/k/a MudGuard