#redBox

#yellowBox

#greenBox

Den hvide box #container, er centreret vandret ved at body selektoren har egenskaben text-align: center;. Selv har den egenskaben position: relative;.

Den røde box er også positioneret relativt, mens den grå er absolut positioneret. Den gule og den grønne box er placeret ved hjælp af egenskaberne float: left; og float: right;, og IKKE postion.

Hent stylesheetet i txt version.

Pointen er at ønsker du at positionere elementer, f.eks. menuboxe (som den grå box), absolut inde i en box, der er automatisk centreret som denne side med text-align: center; i body, skal denne omgivende, centrerede box, #container, have egenskaben position: relative;.
Det er IKKE nok, at den bare er centreret af en omgivende box, UDEN angivelse af dens position og det er heller IKKE nok hvis denne er sat til static, for i så fald, kan den IKKE etablere sig som beholder-box for absolut-positionerede boxe inden i:

Tekstboxen har ingen position, men følger blot flowet i #container-boksen Den er placeret vha. marginer i stedet for.

Position skal bruges med omtanke OG specielt absolut positionering, skal kun bruges, hvor det er nødvendigt, da disse elementer træder UDEN for sidens flow, og det dermed bliver MEGET besværligt at placere efterfølgende elementer