Lage von Popup-Fenster bestimmen

[Gerrit]

Hi,

wie kann ich in dem Beispiel

<style>
#mein-popover {
  background-color: green;
}
</style>
<!-- Der Button öffnet das Pop-up -->
<button popovertarget="mein-popover" popovertargetaction="show">
  Pop-up öffnen
</button>
<h1>Pop</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  ......</p>


<!-- Das Pop-up selbst -->
<div id="mein-popover" popover>
  <p>Dies ist der Inhalt des Pop-ups.</p>
  <p>Dies ist der Inhalt des Pop-ups.</p>
  <p>Dies ist der Inhalt des Pop-ups.</p>
  <button popovertarget="mein-popover" popovertargetaction="hide">
    Schließen
  </button>
</div>

das Popup-Fenster direkt unter dem auslösenden Button positionieren?

[Matthias Scharwies]

Servus!

Hi,

wie kann ich in dem Beispiel

<style>
#mein-popover {
  background-color: green;
}
</style>
<!-- Der Button öffnet das Pop-up -->
<button popovertarget="mein-popover" popovertargetaction="show">
  Pop-up öffnen
</button>

das Popup-Fenster direkt unter dem auslösenden Button positionieren?

Mit Anchor Positioning

Auch wenn das noch nicht in allen Browsern funktioniert, solltest du nichts anderes verwende3n.

Nutzer älterer Browser sehen das Popup - nur eben nicht an der optimalen Stelle.

Herzliche Grüße
Matthias Scharwies

[Auge]

Hallo

wie kann ich … das Popup-Fenster direkt unter dem auslösenden Button positionieren?

Neben der von Matthias erwähnten Technik, sei darauf hingewiesen, dass die mittige Positionierung von Popups (zumindest im Firefox) mit margin: auto; realisiert ist. Die Veränderung der Margins ändert auch die Position des Popups.

Ob sich das herumpfriemeln an den Margin-Werten lohnt, darf aber bezweifelt werden. Aktuell wird das Anchor-Positioning nur noch von Firefox sowie allen Apple-Mobilgeräten, die noch nicht auf iOS26 aktualisiert sind (oder aktualisierbar sind) und deren Nutzer den Safari benutzen, nicht unterstützt.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

sowie allen Apple-Mobilgeräten, die noch nicht auf iOS26 aktualisiert sind (oder aktualisierbar sind) und deren Nutzer den Safari benutzen, nicht unterstützt.

Ist das nicht noch immer so, dass alle Browser auf iOS/ipadOS Webkit als Rendering-Engine verwenden? D.h. dass dann alle Browser auf < 26 Anker-Positionierung noch nicht unterstützen?

🖖 Live long and prosper

[Auge]

Hallo

sowie allen Apple-Mobilgeräten, die noch nicht auf iOS26 aktualisiert sind (oder aktualisierbar sind) und deren Nutzer den Safari benutzen, nicht unterstützt.

Ist das nicht noch immer so, dass alle Browser auf iOS/ipadOS Webkit als Rendering-Engine verwenden?

Mir war so, dass das mit iOS 17.4 für den EU-Raum geändert wurde. Natürlich heißt das im Gegenzug nicht, dass der Firefox auf iOS state pede auch die Gecko-Engine benutzt. Schließlich muss die ja auch erst portiert werden ^[1]. In Chromium-Browsern mag das aufgrund von mehr Ressourcen anders aussehen.

Der explizite Hinweis auf iOS26 bezog sich aber darauf, dass auch der Safari ab dieser Version Anchor Positioning unterstützt. Wenn also Fremdbrowser auf iOS < 26 die Safari-Engine nutzen (was ab iOS 17.4 in der EU nicht mehr notwendig wäre, aber eben nicht sicher so ist), können die's auch nicht.

Tschö, Auge

---

1. Bugzilla 1882872, „[tracking] Land the iOS prototype“ ↩︎