IN DEZE HANDLEIDING:
Onderdeel of element juist positioneren in WordPress
Met positioneringseigenschappen kan de plaats van elementen op een WordPress pagina precies worden bepaald. De elementen kunnen in lagen op elkaar worden gestapeld. Meestal gaat het om een div of een module van je page builder.
Bovendien kan worden aangegeven of elementen zichtbaar moeten zijn of niet. Met deze laatste mogelijkheid hebben de positioneringseigenschappen niet alleen een functie als het om statische documenten gaat. Door ze te gebruiken in combinatie met CSS en HTML kunnen dynamische elementen in een document worden opgenomen.
Het is handig om z-index te leren voor je verder gaat. Lees eventueel deze handleidingen:
z-index css volgorde html elementen op elkaar stapelen
Transparantie achtergrond tekst afbeelding kleur
Verloop gradient achtergrondkleur overlay CSS builder
Verloop achtergrond overlay maken in WordPress De eenvoudigste manier om een kleurverloop als achtergrondkleur van…
Position static | Html Css z-index
elk element heeft standaard een statische positie, dus het element zal zich houden aan de normale paginastroom. Dus als er een links/rechts/top/bottom/z-index is ingesteld dan zal dat geen effect hebben op dat element.
Elementen die de eigenschap position hebben met de waarde static worden op dezelfde manier weergegeven als normale HTML. Ze kunnen niet worden gepositioneerd en ze definiëren geen nieuw referentievak voor afgeleide elementen. Een uitzondering op dit laatste is het BODY element, dat wel een referentiebox vormt voor afgeleide elementen.
Position relative | Html Css z-index
de oorspronkelijke positie van een element blijft in de flow van het document, net als de statische waarde. Maar nu zal links/rechts/top/bottom/z-index wel werken. De positionele eigenschappen “nudge” het element van de originele positie in die richting.
Elementen die de eigenschap position hebben met de waarde relative worden gepositioneerd ten opzichte van de gebruikelijke positie van het element. De ruimte die normaal voor het element wordt gereserveerd, verschuift niet mee.
Absoluut en relatief gepositioneerde elementen vormen een nieuw referentievak voor afgeleide elementen. Een afnemend element beweegt mee met het voorouder element. Dit geldt ook als het afgeleide element relatief ten opzichte van het parent element is gepositioneerd. Wanneer een element wordt verplaatst, behoudt het zijn oorspronkelijke uiterlijk, inclusief eventuele overgangen naar een nieuwe regel.
Voorbeeld van bewegend object/blok met Relative op codepen:
https://codepen.io/team/css-tricks/pen/RPBqoQ/fcdf9b19b6bed8da6af791d7433116b0
Position absolute | Html Css
het element wordt verwijderd uit de stroom van het document en andere elementen zullen zich gedragen alsof het er niet eens is, terwijl alle andere positionele eigenschappen er wel op werken.
Elementen die de eigenschap position met de waarde absolute hebben, wordt de plaats van het element bepaald ten opzichte van de div welke gevormd wordt door het meest dichtbijgelegen ancestor element, dat de eigenschap position heeft met een andere waarde dan static (bijvoorbeeld absolute of relative).
Indien zo’n element niet aanwezig is, wordt de plaats berekend t.o.v. de box, waarin het gehele document zich bevindt. De ruimte die normaal gereserveerd is voor een absoluut gepositioneerd element en eventuele child elementen, verplaatst met het element mee. Absoluut gepositioneerde elementen krijgen hun plaats zonder dat rekening gehouden wordt met andere elementen.
See the Pen Relative Children by Chris Coyier (@chriscoyier) on CodePen.
Position fixed voor vaste plek webpagina
Het html element wordt verwijderd uit de stroom van het document zoals absoluut gepositioneerde elementen. In feite gedragen ze zich bijna hetzelfde, alleen zijn fixed gepositioneerde elementen altijd relatief ten opzichte van het document, niet een bepaalde parent, en worden ze niet beïnvloed door scrollen.
De waarde fixed is een variant van absolute. Het enige verschil is dat de positie niet wordt bepaald ten opzichte van een referentiebox, maar ten opzichte van het canvas (dat deel van de browser waarin een document wordt weergegeven).
Sticky element of kader dat blijft hangen
Bij sticky wordt een element behandeld als een relatieve waarde totdat de scrol-locatie van de viewport een gespecificeerde drempel bereikt, op welk punt het element een vaste positie inneemt waar het moet blijven.
Voorbeeld sticky element
See the Pen Position fixed vs sticky by Pransh Tiwari (@nyctophiliac) on CodePen.
Voorbeelden Position
css-tricks.com/almanac/properties/p/position/
leannezhang.medium.com/difference-between-css-position-absolute-versus-relative