Positon eines Ecks eines HTML-Elements ermitteln bzw. Abstand zum Bildrand

Also dieses Mobile-Zeugs ist echt aufwändiger als gedacht, viel aufwändiger. Ich suche mal wieder was, weiß aber nicht genau wie ich es beschreiben soll, daher hilft mir auch Google nicht wirklich weiter.

Ausgangslage ist ein kleiner Button, unter dem bei :hover eine Infobox erscheint. Derzeitige Ausrichtung. Links bündig mit Button und dann 200px breit.

Das Problem ist nun nur, dass rechts nicht unbedingt genug Platz ist und die Infobox somit im "Nichts" verschwindet, auch wenn nur zu Teilen. Das Script soll nun also ermitteln, wie viel Platz von der linken unteren Ecke des Buttons bis zum Bildrand besteht und wenn es passt, dann die Infobox so anzeigen wie gehabt, wenn nicht, dann rechts ausrichten und nach links anzeigen, also z.B. mit top:-155px.

Nur, und das ist mein Problem, wie bekomme ich raus, wie viel Platz zwischen dem linken unteren Eck des Buttons und dem Bildschirmrand ist?

P.S. I-Tüpfelchen wäre dann noch, wenn das auch mit oben und unten klappen würde, aber das sollte vom Prinzip her dann ja gleich sein, wenn man den einen Punkt ermitteln kann.

Danke schon mal

Hm, dachte das wäre einigermaßen klar.

Es gibt da einen Button, soweit also klar. Dieser hat einen :hover und bei dem erscheint darunter eine Infobox. Die Box ist derzeit per position:absolute linksbündig, ragt also nach rechts raus (Button ca. 50px breit, Box ca. 300px). Leider ist aber teilweise der Bildschirm nicht so breit, dass die Infobox angezeigt wird. Hier möchte ich also, dass in so einem Fall die Box nicht nach rechts angezeigt wird, sondern nach links.

Also quasi als Berechnung:
Wenn "Position X Button + Breite Infofenster kleiner als Browser-Breite", dann andere CSS-Klasse verwenden.

Bin aber auch schon einen Schritt weiter ...

Ist eine Mischung aus:
*** Link veraltet ***
*** Link veraltet ***

Damit erhalte ich die Koordinaten vom Button links oben. Über dessen Breite und Höhe kann ich dann den Punkt links unten errechnen.

... und an einem neuen Problem. Die Position bekomme ich, die Breite des Buttons auch. Was mir jetzt fehlt ist die Breite der Infobox. Hier scheint es aber zu haken, wenn da ein display:none drauf ist und erst durch ein Hover sichtbar wird. Das Script meldet hier einfach Object:NaN, ich kann das also per getElementById nicht ansprechen. Ist das hover weg (bzw. das display:none), die Box also immer sichtbar, dann bekomme ich die richtige Breite....

Und ja, es geht genau um responsive. Die Buttons wandern bei kleineren Seiten nach links (sitzen im aktuellen Fall rechts oben im Header). Aber nicht mit gleichem Abstand, da das sonst mit dem Logo kollidiert. Die nähern sich also langsam der rechten Bildschirmseite. Da die Infobox aber auch nach rechts ausladend ist, kommt es zum Problem.

Nee, einfach global nach links ausrichten geht nicht, die ganze Geschichte ist an mehreren Positionen integriert, eben teilweise links und nicht rechts. Dann würde es da kollidieren

P.S. Das "z.B. mit top:-155px" ist natürlich falsch. Ich meinte left:-xxx

Danke Margin, werde ich mal versuchen.

Bild ist etwas schwierig, da es das ganze dann auf eine Situation begrenzt. Im Grunde kann man aber die FB und G+-Buttons hier oben rechts nehmen: *** Link veraltet ***

Stell Dir da nun vor, die rechte Sidebar wäre weg und der Bildrand wäre genau neben dem Content. Dann würde die Infobox halb aus dem Bildbereich hinaus ragen.

Aber das eben nur als Beispiel und nicht darauf fixieren. Die Buttons können wo anders sein, also auch links am Rand, rechts unten im Eck, mitten im Content, der Inhalt der Infobox kann anders sein und auch das Element selbst, müssen also nicht Social-Buttons sein, können auch Minibilder sein, die ein Größeres als Hoover anzeigen oder gekürzte Texte, die dann per Hoover vollständig erscheinen.

Ich bastel mir da gerade was zusammen, aber ob ich auf dem richtigen Weg bin oder das viel zu kompliziert mache??? Das Problem mit dem display:none habe ich nun umgangen mit visibility:hidden.

Ach ja, alle Elemente, also in dem Fall die Social-Buttons mit allem was drinnen ist und die InfoBox werden per JS in das DOM eingebunden.

Ja Margin, das kann gut sein. Manchmal sehe ich den Wald vor lauter Bäumen nicht und übersehe das Einfachste Muss mir das noch mal durch den Kopf gehen lassen, was Du da geschrieben hast. Hört sich eigentlich logisch an, aber ob ich das dann hin bekomme. Da sind echt Knoten im Kopf, wenn ich da an andere Fälle denke. Das mit den Buttons war ja nur ein Beispiel, ein sehr spezielles.

In der Bildergalerie floaten die Elemente z.B. Da muss die Infobox vom linken Bild rechts angezeigt werden und vom rechten Bild dann links. Ok, das kann ich auch noch mit Klassen regeln, also welche links und welches rechts ist. Aber deren Größe ändern sich ja auch prozentual, je nach Auflösung. Vom letzten Bild unten rechts dann oben links darüber, da es sonst nach unten erscheint und man scrollen muss. Und das dann auch noch in Abhängigkeit der Bildschirmgröße, da das Grundlayout ja auf dem Schirm zentriert ist bzw. in Abhängigkeit der Bildgröße.

Und da ist wohl mein Knoten. Klar, das im Header kann ich mit CSS regeln, keine Frage, aber der Rest? Wobei, so keine Frage ist das ja eigentlich auch nicht, denn die Buttons haben ja nicht immer den gleichen Abstand zum rechten Bildrand. Hm, muss ich mir mal in Ruhe ansehen, mache das aktuell immer mal wieder zwischendurch zwischen 4 anderen Dingen

Daher schrieb ich das vorher allgemein, da es eben sehr viele unterschiedliche Elemente und Anwendungsfälle sind.