VVerplaatsen

Positioneren en eenheden in CSS

vorige les: intern menu

een razendsnelle verplaatsing

Inhoudsopgave

leerdoelen les3
context positioning4
experiment positioning5
position : static6
position : relative7
position : absolute8
position : fixed9
position : sticky10
demo em versus rem11
procenten: ten opzichte waarvan?12
vw en vh13

verplaatsing van café De Bosrand

Leerdoelen

veel voorkomende waarden van positioning
- static
- relative
- absolute
- sticky
- fixed
veel voorkomende maateenheden in CSS
- px
- em
- rem
- %
- vw en vh

Positioning: de context

Met display-types (of die van hun parents) krijgen de elementen hun positie in de viewport;
met de position-eigenschap kan van die plek op verschillende manieren worden afgeweken/bijgesteld;
met transform en margin zijn soms vergelijkbare verschuivingen haalbaar

experiment position

Ga naar https://blanken5.home.xs4all.nl/experimenten/testEM_REM_spelen/testEMs.html
Zie hoe in de video de position-eigenschappen van het zwarte vlakje worden aangepast.
Probeer dit ook

position: static

Geen verplaatsing
(wat de waarden van top en left ook zijn);
Dit is de default instelling voor elk element

position: relative

Verplaatsing ten opzichte van
zijn eigen positie, die het element heeft
De andere elementen in de flow blijven op hun plek: er ontstaat een 'gat' als je echt verplaatst;
Deze eigenschap wordt heel vaak toegepast zonder dat je waarden voor top en left gebruikt (om iets met de children van dit element te kunnen doen.

position: absolute

Verplaatsing ten opzichte van
de positie van de dichtst-bijzijnde ancestor (bijvoorbeeld parent), die niet static is.
De navolgende elementen in de flow, vullen direct de ruimte op die het element had.

ancestor
experimenteer met de position van de 'parent' en het child.

parent

child top: 0; left: 150px;

position: fixed

Verplaatsing ten opzichte van
de positie van de viewport. Als de pagina scrollt blijft het element op zijn plaats.
De navolgende elementen in de flow, vullen direct de ruimte op die het element had.

vastgeplakt

Hier nog een experimenteer-pagina: https://blanken5.home.xs4all.nl/experimenten/positioning/positioning.html

position: sticky

Het element blijft in de flow, tot het de grenswaarde (vaak top) heeft en scrollt dan niet verder binnen de viewport.
Heeft geen invloed op flow van andere elementen

em versus rem

Ga naar https://blanken5.home. xs4all.nl/ experimenten/ testEM_REM_ spelen/ testEMs.html
Kijk wat er met de paarse vlakjes (1em bij 1em) en de beige vlakjes (1rem bij 1rem) gebeurt als de font-grootte van het document wijzigt.
De em-vlakjes schalen mee
De rem-vlakjes en het zwarte px-vlakje blijven even groot
in de groener 'wrapper-div' kan het font apart nog vergroot worden. De paarse vlakjes gaan in grootte verschillen, de beige blijven gelijk.

procenten: tenopzichte waarvan?

%

Dit hangt af van de css-eigenschap:

height 50% is de helft van de hoogte van de parent
width 50% is de helft van de breedte van de parent
top 50% is de helft van de hoogte van de parent
left 50% is de helft van de breedte van de parent
margin-top 50% is de helft van de breedte van de parent
margin-left 50% is de helft van de breedte van de parent
font-size 50% is de helft van de grootte van het font in het betreffende element

Zie: http://bla.hosts1.ma-cloud.nl/blog/100-procent-van-wat/

vw en vh

vw en vh

vw: viewport-width;
vh: viewport-height

height: 50vh 50% van de hoogte van de viewport
height: 100vh precies de hoogte van de viewport
height: 50vw 50% van de breedte van de viewport
height: 100vw precies de breedte van de viewport

Credits

Deze presentatie is gemaakt met gebruik van:

volgende les: Bootstrap