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