div.rel_pos {position: relative; left: 15%; top: 25px; }
Mogelijke waarden van 'position' zijn absolute, relative, static en float. Dat leg ik verderop uit.
Mogelijke plaatsaanduidingen zijn left, right, top en bottom, als volgt:
Met position: relative wordt het element verplaatst ten opzichte van de plaats die het normaal gesproken gekregen zou hebben. Op de plaats waar het anders zou staan blijft een gat omdat de rest van de pagina blijft zoals het zou zijn wanneer het element op zijn originele positie staat.
Met position: absolute wordt gekeken of er een parent-element met
position:absolute of position:relative. Als dat er is dan wordt het element
geplaatst ten opzichte van de linkerbovenhoek van dat parent-element,
zo niet dan wordt het geplaatst ten opzichte van de linkerbovenhoek
van de pagina.
Let op: met position: absolute wordt geen rekening gehouden met andere
informatie op de pagina. Er blijft dan ook geen gat achter op de plaats
waar het element normaal gesproken zou staan omdat het uit de normale flow
wordt gehaald.
Hieronder zie je drie keer een div met relatieve positie en een ingebed element met de drie waarden van position. Kijk in de broncode. In de body zie je div1, div2 en div3. Die krijgen CSS-eigenschappen in het style-blok in de header van de pagina.