R
-Online
N
havo 4
informatica
vwo 4

Box:
plaatsen

positioneren

De volgorde waarin de elementen binnen de HTML pagina staan is ook de volgorde waarin ze onder elkaar gezet worden op het scherm. Daarbij worden in-line-elementen (de naam zegt het al) in de regel gezet. Elementen die ingepakt zijn met ≺span≻≺⁄span≻ bijvoorbeeld. Maar standaard zijn plaatjes ook in-line elementen.

De block elementen nemen standaard de hele breedte van het scherm in en worden dus onder elkaar geplaatst.Dat zijn de meeste standaard elementen en de delen die ingepakt zijn met ≺div≻≺⁄div≻

standaard plaatsing van inline en block

Om elementen anders te plaatsen dan die natuurlijke volgorde heb je de eigenschap position. Dezze kun je onder andere instellen op fixed, absolute en relative.

Relative is de normale positionering, Je kunt een element verschuiven ten opzichte van zijn normale plek door de eigenschappen top left bottom en right een waarde te geven. Dit kan in px in % of in em of rem.

relatieve plaatsing van een block

Een block relatief verplaatsen

div{
  position: relative;
  top: 20px;
  left:10px;
}

Postion:absolute neemt de box van de ouder als kader voor zijn eigen positie. Het wordt daarmee helemaal uit de standaard volgorde verwijderd. Andere elementen op de bladzijde houden er géén rekening meer mee. Als ouder geld de eerste omvattende box die position:relative heeft. (als een omvattende box ook postion:absolute heeft wordt deze ook niet "gezien")

absolute plaatsing van een block

Postion:fixed neemt het scherm van het device (laptop / mobieltje enz.) waarop gekeken word als kader. Het beweegt niet mee als je het scherm scrollt. Dit is bijvoorbeeld te gebruiken voor foto's als achtergrond of de menu-knoppen die altijd in beeld blijven. (zoals hier links)

absolute plaatsing van een block