✔ Positionierung (position: absolute;)

[TinniTuss]

Hallo Leute

Ich verstehe die absolute Positionierung nicht.
Nach meinen Lehrbüchern orientiert sich die absolute Positionierung am Elternelement oder (falls nicht vorhandenen) am "body". Ich möchte meinen "Weiter-Pfeil" unten rechts anbringen, fest und für zwanzig folgende Seiten immer an der gleichen Stelle, nicht im "Fluß" unter dem letzten Text oder sonstwelchem Element, sondern genau da. Statt dessen schwimmt er immer horizontal im HTML und orientiert sich am Rand des Fensters. Geht die Fensterbreite über ca. 1000 Pixel läuft der Pfeil aus dem Rahmen (blau) raus. Am "body" richtet er sich jedenfalls nicht aus. Und wenn er es am Elternelement täte, was seinerseits positioniert wäre, dann wäre dafür das Maß aller Dinge ebenfalls der "body" oder wiederum "Mamma&Papa". Also, wie positioniere ich absolut, unabhängig von der Fenstergröße bei fester div-Breite oder body-Breite und variablen Außenabständen (margin:auto)?

Ich dachte, ich hätte die Positionierung (absolute) verstanden.
Wenn hier jemand zu meinem persönlichen "Grundverständnis" beitragen könnte, wäre ich sehr dankbar. Wenn der Pfeil (oder ähnliches) so einfach nicht zu plazieren ist, würde ich auch eine andere Technik oder Trick ganz gerne nehmen.

Das Muster für diese Problematik steht an dieser Stelle:
http://www.diggitus.de/sub/community/positionierung.html

...oder das "lebende Objekt", ohne Garantie daß das Problem da auch bestehen bleibt
http:/www.weeze.diggitus.de


viele Grüße

HH

 

[Maik]

Hi,

wenn sich die Positionierung auf die Grenzen des DIVs beziehen soll, dann positionier dieses relativ.

div{
			padding:10px;
			border: 1px solid red;
			height:600px;
			background-color:blue;
			position:relative;

}

 

[TinniTuss]

Hallo Maik

...habe ich versucht.

Aber das einzige übergeordnete div ist per "margin:auto" zentriert. Ich hab' mit "position:absolute; left:auto" beim parent-div experimentiert, bin aber bis jetzt auf keinen grünen Zweig gekommen.

HH

 

[Maik]

Bei mir führt es aber zum erwünschten Ergebnis, dass das Element sich nun innerhalb des DIVs befindet, und beim Skalieren des Browserfensters das DIV nicht verlässt.

 

[hela]

... Wenn hier jemand zu meinem persönlichen "Grundverständnis" beitragen könnte, wäre ich sehr dankbar...

Vermutlich machst du folgenden Fehler:

body{
            width:800px;
            margin:auto;
            margin-top:20px;}

Kontrolliere doch mal, ob das BODY-Element wirklich 800px breit ist indem du diesem Element eine Hintergrundfarbe gibst! Falls das nicht der Fall sein sollte, dann solltest du einen alles umhüllenden WRAPPER-Block mit eben dieser Größe einrichten.

 

[TinniTuss]

@Maik

Ja...

...Du hast recht, bei mir auch! (Danke schonmal.)

Die Sache ist nur bei meinem "lebenden Objekt" nicht ganz so einfach, da muß ich erstmal die Erkenntnis aus dem Musterbeispiel umsetzen. Und beim ersten Versuch waren erstmal meine Vor- & Zurückpfeile komplett von der Bildfläche verschwunden...


...to be continued...

HH

 

[TinniTuss]

Hallo Maik. Danke!

Ich mußte erstmal die Koordinaten neu justieren, sie waren über das Ende des mit height begrenzten div "gerutscht" Es sieht jetzt erstmal so aus, wie ich es mir an dieser Stelle vorgestellt habe. Es gibt noch einige andere Sites auf die ich diese Lösung anwenden kann.

Die abschließende Frage:
Habe ich mich jetzt nur dumm angestellt oder war das ein "Trick" Alle Beschreibungen die ich vorligen habe, deuten sowas nicht im geringsten an. Und selbst das SelfHTML-Beispiel (http://www.tutorials.de/forum/css/287007-vergleich-relative-absolute-positionierung.html) funktioniert nicht mehr, wenn z.B. body kleiner als das Browserfenster ist und marginleft) auf auto steht.

Jetzt haben wir ja nicht wirklich das Eltern-div positioniert sondern nur so getan als ob. Kannst du eine Dokumentation empfehlen in der ich z.B. solche Feinheiten nachlesen (und nachempfinden?) kann?




@hela

Du hast wahrscheinlich Recht. Zumindest war das einer der Unterschiede zwischen Original und Problem-Muster.
Vorher hatte (analog) nur der Wrapper die 800px. Jetzt hat sie der body einschließlich des margin:auto und der Wrapper steckt im Korsett, schön eng?!


Dankeschön.





Viele Grüße
vom sonnigen (ja wirklich!) Niederrhein

HH