Hallo!

Schaut euch doch bitte mal dieses Biespiellayout an. Ist im Prinzip ganz einfach - #header, #left, #right, #main - 3 spaltiges Layout mit Header eben. Ich denke ich habe dieses Layout in allen Einzelheiten verstanden - eine Tatsache bereitet mir allerdings noch Kopfzerbrechen.

Warum wurde für #main die Deklaration position: relative; eingefügt. Nach meinem Verständnis müsste es mit dem Defaultwert für position, also static genauso funktionieren. Ganz einfach weil alle vier der Eigenschaften top/bottom/left/right den impliziten Wert 0 haben.

Wenn ich die CSS Deklaration auf position: static; ändere, wird der Content von #main immer noch richtig positioniert. Die beiden Kindelemente von #main - #left und #right werden dann allerdings nicht mehr richtig positioniert. Warum?

Was ist genau der Unterschied zwischen relative und static?

mfg
Lestat

PS: Alles in Safari 2 ausprobiert, müsste also einigermaßen mit dem Standard übereinstimmen.

__________________
wissen ist macht.

#main braucht position: relative;, damit sich seine absolut positionierten Kindelemente an ihm ausrichten und nicht am nächsten übergeordneten positionierten Element, sprich dem body. static ist default und gleichbedeutend mit "nicht positioniert".

Nimm aber nicht dieses CSS. Absolute Positionierung ist für Dein Vorhaben nicht nötig.

Hm.

Okay, verstehe ich. Das ist genau der Effekt den ich mit relative im Gegensatz zu static erreiche. Gibt es dafür auch einen Grund warum sich relative hier anders verhält? Ich meine damit ob es einen anderen Teil der Spezifikation/eine andere Regel gibt die dieses Verhalten erfordert. Oder wurde dieses Verhalten willkürlich vom W3C definiert?

Ich habe nicht vor diese Vorlage irgendwo zu verwenden

Sorry, wenn ich dumme Fragen stelle. Ich versuche nur meine CSS Kenntnisse ein wenig zu vertiefen

mfg
Lestat

__________________
wissen ist macht.

Schau mal hier:
Positionierung der Container mit CSS

__________________
Wer floatet muss auch clearen!, Menu-Listen, 3-Spalten-Layout, CSS-FAQs