Gibt es eine Möglichkeit, die absolute Positionierung in CSS auf der ganzen Seite anstatt auf dem sichtbaren Fenster zu basieren?

Question

Ich habe derzeit eine HTML-Seite mit einem Vollbild-Canvas-Element. In diesem Canvas-Element habe ich verschiedene Dinge gezeichnet, die die Seite füllen. Wenn die Größe der Seite geändert wird, werden die gezeichneten Objekte in der Größe angepasst, um den Bildschirm zu füllen. Sobald jedoch eine bestimmte Mindestgröße erreicht ist, werden die gezeichneten Objekte nicht mehr angepasst, stattdessen füge ich der Seite Überlauf-Bildlaufleisten hinzu.

Momentan versuche ich, ein neues Element über der Zeichenfläche hinzuzufügen, das dauerhaft an einer Position relativ zur unteren rechten Ecke der Zeichenfläche fixiert ist. Geben Sie das div ein CSS-Styling von postion:absolute; funktioniert gut, während die Leinwand neu skaliert wird. Sobald die Seite diese Mindestgröße überschreitet und die Leinwand nicht mehr neu skaliert wird und stattdessen Bildlaufleisten angezeigt werden, bewegt sich das neue div mit dem sichtbaren Fenster weiter, anstatt dort zu verbleiben, wo es relativ zur Zeichenfläche sein sollte. Ich habe gespielt mit postion:fixed; (Ersetzen der CSS mit jQuery) einmal die Größe ist klein genug, aber das scheint auch nicht zu funktionieren.

Hat jemand irgendwelche Vorschläge?

Best,
Sami

Answer 1

enthalten die Leinwand in einem Container div dh

<div class="canvas_container"> 
    <canvas></canvas> 
    <div class="positioned_element"></div> 
</div> 

und in Ihrem CSS

.canvas_container{position:relative;} 
.positioned_element{position:absolute;bottom:0;right:0;} 

Dies wird das positionierte Element nach rechts gehen machen/Unterseite des übergeordneten ".canvas_container" und nicht der Körper der Website.