1. Les 2.2
Positioneren
HTML
Module 2

2. Positioneren
HTML
Module 2
Doel: Leren positioneren d.m.v. css

3. HTML
Module 2
2.2 Positioneren
Relativeposition
Start zonder positionering

4. HTML
Module 2
2.2 Positioneren
Relativeposition
Positioneren kan met alle meet eenheden en kan negatief
of positief zijn. De volgende opties zijn er bij positioneren:
top, bottom, leften right. Relativepositionheeft effect op de
Normalflowvan de overig elementen.

5. HTML
Module 2
2.2 Positioneren
Relativeposition
Bij aanpassen van het element is
er een effect op de andere elementen

6. HTML
Module 2
2.2 Positioneren
Absolute position
Start zonder positionering

7. HTML
Module 2
2.2 Positioneren
Absolute position
In dit voorbeeld zie je
dat door het gebruik van absolute
positionhet fixedplaatje achter
het absolute plaatje is verdwenen.
Absolute houd dus geen rekening
met de normalflow.

8. HTML
Module 2
2.2 Positioneren
Absolute position
Absolute positionering wordt berekend vanuit
het laatst gepositioneerde element waarin
het te positioneren element is geplaatst.
In dit geval is dat de HTML tag(altijd in positie)

9. HTML
Module 2
2.2 Positioneren
Absolute position
Bij aanpassen van het element is
er geen effect op de andere elementen

10. HTML
Module 2
2.2 Positioneren
Start zonder positionering
Fixedposition

11. HTML
Module 2
2.2 Positioneren
Fixedposition
In dit voorbeeld zie je dat door het
gebruik van fixedpositionhet
fixedprecies op de plek zet binnen
de HTML pagina. Dit is de vast positie

12. HTML
Module 2
2.2 Positioneren
Stackorder
Z-index

13. HTML
Module 2
2.2 Positioneren
Z-index
Zonder z-index

14. HTML
Module 2
2.2 Positioneren
Z-index
Met z-index
Zonder z-index

15. HTML
Module 2
2.2 Positioneren
Z-index

16. HTML
Module 2
2.2 Positioneren
Overflow

17. HTML
Module 2
2.2 Positioneren
Geen overflow

18. HTML
Module 2
2.2 Positioneren
Overflow-hidden

19. HTML
Module 2
2.2 Positioneren
Overflow-auto

20. HTML
Module 2
2.2 Positioneren
Overflow -scroll

21. Opdracht 1
HTML
Module 2
2.2 Positioneren
Maak het voorbeeld hieronder na, het bestaat uit 4 images
die bijgevoegd zijn in de studieroute. Je moet gebruik maken
van positionering.
Maak van het geheel een RAR-fileen uploaddeze naar de
in de map opdracht 1 in natschool

22. Opdracht 1
HTML
Module 2
2.2 Positioneren
Maak het voorbeeld hieronder na, het bestaat uit 2 images
die bijgevoegd zijn in de studieroute. Je moet gebruik maken
van positionering en overflow
Maak van het geheel een RAR-fileen uploaddeze naar de
in de map opdracht 2 in natschool

23. Huiswerk
Bekijk alle behandelde stof en werk de opdrachten verder
uit. Maak van beide opdrachten een rarfile en uploaddeze
naar Natschool in de map 2.2 Positioneren doe dit binnen
4 schooldagen.
HTML
Module 2
2.1 Forms