Oefeningen
Last updated
Last updated
Bouw onderstaand digitaal visitekaartje na. Gebruik position: relative om de afbeelding over de bovenste rand te duwen. Achteraf duw je je naam, titel en e-mailadres ook op de zelfde manier wat mee omhoog zodat alles mooi uitgelijnd is.
In de bijlage vind je de HTML en CSS code voor onderstaande webpagina te genereren. Jij moet enkel nog voor de positionering van de <aside> zorgen. Zorg dat de <aside> in de rechterbenedenhoek gepositioneerd wordt, en let daarbij op de kleine afstand tot de rand. Gebruik hiervoor de CSS propterty position: absolute.
Zoals je in oefening 2a zult zien zal het <aside> element niet automatisch herpositioneren wanneer je naar beneden scrolt. Verander position: absolute in position: fixed om de container mee te laten scrollen.
Stap 1 - Bouw bovenstaande afbeelding na in HTML en CSS. Gebruik position: absolute om de drie lagen over elkaar te leggen. Pas voor elke laag de positie een beetje aan zodat alle lagen zichtbaar zijn.
Stap 2 - Vervolgens Het is jou taak om de volgorde van de drie lagen om te keren (dus: bovenaan komt laag 1, in het midden laag 2, en onderaan laag 3) zonder dat je de volgorde van de HTML of CSS aanpast. Gebruik hiervoor de CSS property z-index.
