terug naar lessen overzicht

Zelfstudie 2: Positions

In deze zelfstudie serie:
checkmark simple
Les 2: Positions Sandbox
checkmark simple
Les 3: Positions Bouwen
checkmark simple
checkmark simple
checkmark simple
checkmark simple
checkmark simple
checkmark simple

Alle lessen in deze reeks bekeken?

Je hebt alle lessen in deze reeks afgerond!

checkmark simple
Oops! Something went wrong while submitting the form.

Je hebt alle lessen afgerond!

checkmark simple

Les 1: Intro Positions

Wat is position?

CSS position is een basis element van CSS. Het bepaalt hoe en waar elementen getoond worden op het scherm. Ook kan de position van een element gevolgen hebben voor het positioneren van zijn child elements. Position mogelijkheden: static, relative, absolute, fixed, sticky.

Static

Alle elementen hebben by default de waarde position: static; Een static element wordt gerenderd in de volgorde waarin ze voorkomen in de HTML. Ook kan je de positie niet verschuiven met bijvoorbeeld left: 200px;

Relative

Elementen met position: relative; worden gepositioneerd ten opzichte van zijn static po-sitie. Dit doe je door top, left, right, bottom toe te kennen aan een element in de css.

Absolute

Absoluut positioneren werkt anders dan relatief positioneren. Het is namelijk ten opzichte van zijn parent element. Maar hierbij moet je rekening houden dat het ten opzichte van het eerste parent element met een andere position dan static. Als je een element in de rechter onderhoek van zijn directe parent wil positioneren en je opeens ziet dat het element helemaal rechtsonder de pagina komt, dan zaleen logische verklaring zijn dat zijn parent position static heeft. Zodra je dit verandert naar position relative is het probleem opgelost.

Fixed

Een fixed element wordt gepositioneerd relatief aan de viewport. Dit element is dus altijd op dezelfde plek als je scrolled.

Sticky

Een sticky is een beetje anders dan de andere mogelijkheden. Een sticky elementswitched tussen relative en fixed, afhankelijk van de scroll positie. Het element isrelatief totdat hij voldoet aan een waarde en plakt dan vast op een positie.

Les 2: Positions Sandbox

Volg de video en doe mee

In deze video ga je in een sandbox omgeving op W3Schools oefenen met position: static, relative, absolute, fixed en sticky.

Les 3: Positions Bouwen

Volg de video en doe mee

In deze video gaan we wat cools maken met de nieuwe CSS technieken die we hebben geleerd in deze reeks!

*Er zijn geen links bij deze video reeks.
icon: files
Project files
* De link hierboven download een bestand via dropbox dit kan een zip of rar bestand zijn. Weet je niet hoe je dit type bestand kan gebruiken? Volg deze instructie voor zip bestanden. Of download WinRar voor rar bestanden.
* Er zijn geen project files om te downloaden voor deze zelfstudie.

Stel vragen en help medestudenten

Tijdens de live lessen zijn er opdrachten waarbij je zult samenwerken met jouw studiegenoten. Hiervoor gebruiken wij Discord. Daarnaast kun je ook jouw vragen stellen, de docenten zullen je vervolgens verder helpen.

Het kanaal voor deze cursus op onze discord: HTML CSS JS beginners course

portfolio-cursus

logo - discord

#code-cafe

100+ leden