Post on 03-Jul-2015
Les 2.2Positioneren
HTMLModule 2
Positioneren
HTMLModule 2
Doel: Leren positioneren d.m.v. css
HTMLModule 22.2 Positioneren
Relative position
Start zonder positionering
HTMLModule 22.2 Positioneren
Relative positionPositioneren kan met alle meet eenheden en kan negatiefof positief zijn. De volgende opties zijn er bij positioneren:top, bottom, left en right. Relative position heeft effect op de Normal flow van de overig elementen.
HTMLModule 22.2 Positioneren
Relative positionBij aanpassen van het element iser een effect op de andere elementen
HTMLModule 22.2 Positioneren
Absolute position
Start zonder positionering
HTMLModule 22.2 Positioneren
Absolute position
In dit voorbeeld zie jedat door het gebruik van absoluteposition het fixed plaatje achterhet absolute plaatje is verdwenen.Absolute houd dus geen rekeningmet de normal flow.
HTMLModule 22.2 Positioneren
Absolute position
Absolute positionering wordt berekend vanuithet laatst gepositioneerde element waarin het te positioneren element is geplaatst.In dit geval is dat de HTML tag (altijd in positie)
HTMLModule 22.2 Positioneren
Absolute position
Bij aanpassen van het element iser geen effect op de andere elementen
HTMLModule 22.2 Positioneren
Start zonder positionering
Fixed position
HTMLModule 22.2 Positioneren
Fixed positionIn dit voorbeeld zie je dat door het gebruik van fixed position het fixed precies op de plek zet binnen de HTML pagina. Dit is de vast positie
HTMLModule 22.2 Positioneren
Stack orderZ-index
HTMLModule 22.2 Positioneren
Z-indexZonder z-index
HTMLModule 22.2 Positioneren
Z-index
Met z-indexZonder z-index
HTMLModule 22.2 Positioneren
Z-index
HTMLModule 22.2 Positioneren
Overflow
HTMLModule 22.2 Positioneren
Geen overflow
HTMLModule 22.2 Positioneren
Overflow-hidden
HTMLModule 22.2 Positioneren
Overflow-auto
HTMLModule 22.2 Positioneren
Overflow - scroll
Opdracht 1HTMLModule 22.2 Positioneren
Maak het voorbeeld hieronder na, het bestaat uit 4 imagesdie bijgevoegd zijn in de studieroute. Je moet gebruik maken van positionering.
Maak van het geheel een RAR-file en upload deze naar de in de map opdracht 1 in natschool
Opdracht 1HTMLModule 22.2 Positioneren
Maak het voorbeeld hieronder na, het bestaat uit 2 imagesdie bijgevoegd zijn in de studieroute. Je moet gebruik maken van positionering en overflow
Maak van het geheel een RAR-file en upload deze naar de in de map opdracht 2 in natschool
HuiswerkBekijk alle behandelde stof en werk de opdrachten verderuit. Maak van beide opdrachten een rar file en upload deze naar Natschool in de map 2.2 Positioneren doe dit binnen 4 schooldagen.
HTMLModule 22.1 Forms