Module 12 Flashcards
Position: absolute
Om een child zich te laten verhouden tot de eerste parent die als positie relative heeft meegekregen. Trekt het element uit de html structuur, dus geen ruimte meer voor vrij gehouden.
De parent moet relative!
Hoe verplaats je een absolute element ten opzichte van z’n eerste relative parent?
Dmv top, bottom, left en right
Position; relative
Maakt de positie van dit element relatief aan haar ouder
Als de eerste parent met deze position, dan beweegt de absolute child ten opzichte van hem
Z-index
Kan bepalen welk element bovenligt bij het gebruik van de relative en absolute positions
.
.
Z-index waarden (negatief, standaard en positief)
Het hoogste index cijfer bepaald de bovenste positie
Negatief / plaatst het absolute element achter zijn relatieve buddy
Standaard / =0
Positief / plaatst het absolute element boven zn relatieve buddy
Overlay
Een manier om een filter te leggen over niet contrasterende kleuren in de achtergrond afbeelding.
Te doen dmv een div (plaats in html maakt niet uit)
CSS elementen van overlay div
Background-color: white;
Height: 100%;
Width: 100%;
Top: 0;
Bottom: 0;
Position: fixed;
Opacity: .5;
Z-index: -1;
Transform
Gebruikt om elementen te verschuiven, vergroten of roteren.
Vaak samen met Javascript of :hover
Transform: translate
Het verplaatsen van een element
Transform: scale
Het vergroten van een element over horizontale of verticale as
Transform: rotate
Het draaien van een element
Transition
Het toevoegen van tijd en een tijdspad aan een actie waardoor deze soepel verloopt
Transition-property
De property waarop de transitie plaatsvindt
Transition-duration
Hoe lang de transitie duurt
