#container
#redBox
#greyBox
#yellowBox
#greenBox

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

Også den røde box er positioneret relativt, mens den grå er absolut positioneret. Den gule og grønne box er placeret ved hjælp af egenskaberne float: left; og float: right;, ikke position. Klik på de enkelte bokse for at se deres top/left værdier. Se nærmere i koden.

Pointen er at for at positionere elementer, f.eks. menubokse (som den grå box), absolut inde i en box der er automatisk centreret som her 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:

A relatively positioned box establishes a new containing block for normal flow children and positioned descendants.(http://www.w3.org/TR/REC-CSS2/visuren.html#relative-positioning).

[...]

The following example shows an absolutely positioned box that is a child of a relatively positioned box. Although the parent outer box is not actually offset, setting its 'position' property to 'relative' means that its box may serve as the containing block for positioned descendants.(http://www.w3.org/TR/REC-CSS2/visuren.html#q29).

Tekstboksen har ingen position, men følger blot flowet i #container-boksen. Den er placeret ved hjælp af marginer i stedet.

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 derfor bliver besværligt at placere efterfølgende elementer.

Tak til“snuf”Eksperten for ideen med position: relative; for den hvide box. Se: http://www.eksperten.dk/spm/453723.