Print

[Rashnu]

p. 217 Bij het vergelijken met jouw uitgewerkte voorbeeld valt mij op dat jij voor #blauw
        position: relative;/* Nodig voor de z-index die hierna volgt. Omdat voor #blauw geen coördinaten nodig zijn voldoet relative hier. */     
gebruikt, terwijl je bij punt 19 juist vraagt om een absolute position incl. coördinaten (top en left) in te geven. M.a.w. het voorbeeld is niet precies in overeenstemming met de opdracht.
En hoezo, het voldoet hier? Wat heeft nu de voorkeur?
Bij #groen zet je       position: absolute; /* Niet nodig om #groen te positioneren tov wrapper.
Waarom niet?
Ik begrijp sowieso het verschil tussen absolute en relative niet goed, want beide waarden lijken bij #groen hetzelfde effect te hebben. Bij #blauw weer niet: bij absolute wordt blauw gepositioneerd t.o.v. wrapper (de parent dus), en bij relative t.o.v. groen (de sibling). Maar als je left en top weglaat dan maakt het weer niet uit.

[Frances]

Het online voorbeeld van oefening 13.1 wijkt hierin inderdaad af van het boek. In het boek laat ik zien wat er gebeurt als je een element absoluut positioneert: het gaat uit de flow van de pagina. Dus als je alleen groen absoluut positioneert komt deze bovenop blauw te liggen ondanks dat blauw in de HTML-code ná groen komt. Pas als je blauw óók een absolute positie geeft (en daarmee ook uit de flow van de pagina haalt) wordt de volgorde op het scherm gelijk aan die in de code: onderop groen met daarbovenop blauw.

In het uitgewerkte voorbeeld kan je zien hoe je een eerste laag op het scherm bovenop de volgende laag plaatst. Z-index werkt niet zonder een position: relative (of absolute als het zo uitkomt). En dat position: relative voldoet als het slechts gaat om een z-index te kunnen toepassen. Oftewel gebruik position: absolute alleen als je écht absoluut wilt positioneren (dus met coördinaten).

Verder vraag je: 'Bij #groen zet je position: absolute; /* Niet nodig om #groen te positioneren tov wrapper. Waarom niet?' Dit vind ik niet terug in de oefening.

Position:absolute voegt niets toe aan een element zolang dit geen coördinaten heeft. Dus die gaat eigenlijk altijd samen met top, right, bottom en/of left.

Position:relative maakt een voorouder het containing block oftewel het element ten opzichte waarvan het kind zich positioneert. Heel belangrijk dus. (overigens voldoet position: absolute ook voor dit doel maar is eigenlijk te zwaar voor de taak, relative heeft de voorkeur)

En om het verhaal compleet te maken: je kunt met position:relative icm coördinaten een element tov zichzelf positioneren. Kan handig zijn maar zal je niet vaak nodig hebben. De oorspronkelijk plek blijft open.

Zie ook uitleg in boek op pag. 194-195.