Erklärung positions?

[mathi77]

Hi @ll,

ich hab mal eine frage?!
bei CSS können ja die Div-Container verschieden positioniert werden, nur verstehe ich nicht ganz die feinen unterschiede zwischen den diversen begriffen:

position: absolute, relative, fix,... was gibts noch?

kann mir das hier irgendwie logisch erklären?

danke & glg
Mathi

 

[Herr_D]

AW: Erklärung positions?

 

[MainAngler]

AW: Erklärung positions?

Das hab ich auch lange nicht kapiert bis ich dann ein Beispiel sah.

Erstelle einfach mal 3 Divs, gib ihnen einen farbigen Rahmen sowie einen farbigen Hintergrund und lass erstmal position weg.
Danach gehst du her und gibst dem mittleren Div (Div2) die position: relative und schaust dir das Ergebnis an - danach position: absolute und schaust dir wiederrum das Ergebnis an.
Dann kommst du auch eher dahinter wie das alles funktioniert.

Kurz gesagt:
relative - die Box wird relativ zu ihrer Poition, an der sie normal wäre, um X-Pixel verschoben.
absolute - die Box verlässt ihre Position und "schwebt" im Raum.
fixed - die Box bleibt wie ein Türsteher an ihrer Position und lässt sich nicht aus dem Bild verdrängen.

 

[kleinerOnkel]

AW: Erklärung positions?

oder schau mal auf CSS 4 You - The Finest in Stylesheets nach

 

[gina1]

AW: Erklärung positions?

Bei "absolut" gehen die von Dir eingegebenen Maße vom Nullpunkt links oben von Deiner Seite aus. Hilft Dir das ein bißchen weiter?

 

[LongDonGold]

AW: Erklärung positions?

Genau, wenn du als Angabe position:absolute; nimmst, kannst du die Container selbst bestimmen wo sie hinkommen sollen.

 

[leohh]

AW: Erklärung positions?

Bei "absolut" gehen die von Dir eingegebenen Maße vom Nullpunkt links oben von Deiner Seite aus. Hilft Dir das ein bißchen weiter?

Das ich den sog. Nullpunkt selber bestimmen kann, spielt hier keine Rolle?
Somit ist oben links nur bedingt richtig.

Genau, wenn du als Angabe position:absolute; nimmst, kannst du die Container selbst bestimmen wo sie hinkommen sollen.

Und das kann ich mit relativer bzw. fixer Positionierung etwa nicht?

Ich frage nur, damit ihr ueberlegt

 

[LongDonGold]

AW: Erklärung positions?

Nicht wirklich, weil der relative Aspekt des verschieben geht nur wenn man selber immer die Koordinaten der Postion selber angibt und kein Drag & Drop möglich ist. Beidem Atribute absolute, kann es mit der Maus verschieben

 

[leohh]

AW: Erklärung positions?

Danke, jetzt hab ich es verstanden -hust-
Was aber noch viel wichtiger ist, jetzt hast du es dem TE verstaendlich erklaert

 

[sokie]

AW: Erklärung positions?

Drag&Drop ?
anfangs hatte ich vermutet, hier ging es um CSS?!

 

[LongDonGold]

AW: Erklärung positions?

Klar geht es hier weiter um das Thema CSS und die Position

Dachte halt, das wäre so leichter zu erklären

 

[leohh]

AW: Erklärung positions?

Drag&Drop ?
anfangs hatte ich vermutet, hier ging es um CSS?!

sokie mit Drag'n'Drop ist dieses Verschieben des Elementes ohne Werteingabe gemeint, darauf wollt ich ihn eigentlich hauptsaechlich hinweisen, weil ich es damals - als blutjunger Anfaenger - genau so erklaert bekommen habe und das ganze somit auch einfacher verstanden hab als das theoretische, fachgesimpel aus selfHTML und Konsorten es tun.

Danke LongDonGold
Sag mir, wenn ich es aus meinen Erfahrungswerten heraus, falsch interpretiert habe

 

[LongDonGold]

AW: Erklärung positions?

Nein es ist genau richtig was du sagst, ich habe es damals auch so Verstanden wie du, durch diverse Seiten. Nur der Nameswert "Drag&Drop" ist sehr bekannt und auch leicht zu verstehen.
Ich muss dazu gestehen das ich selber eine falsche Erklärungen dazu abgegeben haben *sorry*

Also wie gesagt, man kann per Maus bei der postion:absolute "drag&drop" die div Zeile so anordnen wie man sie haben möchte

 

[sokie]

AW: Erklärung positions?

für mich gehören Drag@Drop funktionalitäten eher in den javascript-bereich, oder ähnliche scripte. Da gefällt mir das relativ klare 'Fachgesimpel' von selfhtml und co doch sehr gut. Hab ich was wichtiges verpasst? (web 2.5 oder so?)

 

[mathi77]

AW: Erklärung positions?

danke an alle, für eure zahlreichen antworten! jetzt hab ichs gecheckt