... blijft #infozoek nu het child van het content?
Ja dat is het geval: alles wat binnen een ander element zit, is daarvan een afstammeling (kind, kleinkind, enz.).
Hier ziet de structuur er zo uit (de #infozoek heet inmiddels #infostart):
HTML:
<div id="content"> <!-- {position: relative} -->
<div id="fotoproef"> <!-- geen positie opgegeven -->
<div id="fotoeen"></div> <!-- {position: absolute} -->
</div>
<div id="datum">...</div> <!-- {position: absolute} -->
<div id="zoek">...</div> <!-- {position: absolute} -->
<div id="menu">...</div> <!-- {position: absolute} -->
<div id="infostart">...</div> <!-- geen positie opgegeven -->
</div>
D.w.z. de #fotoproef, #datum, #zoek, #menu en #infostart zijn alle 5 children van de #content.
En #fotoeen is een child van #fotoproef = een kleinkind van de #content.
Bij een element met absolute positie gaat de browser op zoek naar het eerste element erboven dat een relatieve positie heeft.
Dat is dan het ophangpunt voor de
positie van het absolute ding.
- Bij #datum, #zoek en #menu is het eerstbovenliggende element met een relatieve positie: de #content. Dat wordt dus het ophangpunt voor de plaatsbepaling.
- Bij #fotoeen heeft de parent #fotoproef géén positie opgekregen, die wordt overgeslagen. De parent van #fotoproef is de #content, met wel een relatieve positie. Dus #fotoeen heeft ook als ophangpunt de linkerbovenhoek van de #content.
Maar wat ik bedoelde: tegelijkertijd ontsnapt het
oppervlak van het absoluut geplaatste element aan de
normal flow (de gewone opbouw-richting van de html-elementen, en de plaats die ze innemen).
In de
normal flow (van boven naar beneden, en van links naar rechts) komen block-elementen als een <div> of een <p> altijd onder elkaar, en inline-elementen als een <img> altijd naast elkaar (voor zover er ruimte is, anders weer naar beneden).
Elementen met absolute positie trekken zich hier niets van aan, en kunnen bv. over een ander element heen geplakt worden.
- Dat gebeurt er bv. als je doet: div#fotoeen {margin: 0;}.. Probeer maar, dan komt het plaatje van het grijpertje zowel over het menu als over de Welkom-regel heen.
- Het eerstvolgende element in de normal flow (zonder abs. positie) is de #infostart. Die houdt geen enkele rekening met de breedte en hoogte van de ontsnapte #fotoeen, maar wordt automatisch ook opgehangen aan de #content.
- Met #infostart {...; margin: 0 0 0 70px;} erbij kan je dat zien: de teksten verdwijnen nu achter het plaatje, in plaats van op een regel er onder te komen.
Vanwege dit soort verschijnselen is het meestal gevaarlijk om alles een absolute positie te geven. Het model wordt er helemaal star van, en elementen kunnen zich niet vanzelf anders gaan rangschikken of meerekken als dat nodig is (bv. bij meer inhoud er in).
Tips:
- Probeer het gebruik van {position: absolute} zo veel mogelijk te vermijden.
- Elementen onder elkaar zetten gebeurt meestal vanzelf: daarvoor hoeft geen position-eigenschap opgenomen te worden. Met margins en paddings kunnen de afstanden geregeld worden.
- Elementen naast elkaar zetten kan met de {float:left;} of {float:right} eigenschap.
- Nu onttrekken gefloate elementen zich óók aan de normal flow; maar door erna een {clear: left;}, {clear: right;} of {clear: both;} te zetten wordt er wel rekening gehouden met de hoogte van een gefloat element. Dan komt het volgende element er netjes onder, ipv ernaast (als daar nog ruimte zit).
- Bij een element met abs. positie is dat niet het geval. Dan heb je geen grip meer op de hoogte, en kan je dus ook niet de achtergrond eronder tot beneden aan laten doorlopen, als die achtergrond in een parent-element of hoger zit.
- Dat was wat er gebeurde toen er nog een {position: absolute;} in de #infostart zat. 
Met vriendelijke groet,
CSShunter
___________
PS: Zonder absolute posities loop je ook minder het risico dat één of meer van de in omloop zijnde IE-versies op eigen houtje de positionering verkeerd gaan zetten.
De huidige testpagina ziet er bv. in IE7 zo uit (IE8 en IE9 doen het goed):
