Positie elementen CSS relative absolute fixed sticky

Met positie eigenschappen kan de plaats van elementen op een WordPress pagina worden bepaald. Elementen kunnen in lagen op elkaar gestapeld.

Logo cursus traing wordpress

Positie elementen CSS relative absolute fixed sticky

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 .

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:

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.

Voorbeeld 1
Voorbeeld 2

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 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


Meer informatie over Positie elementen CSS relative absolute fixed stickyof info?

Wil je meer weten? Veel cursisten met interesse in Positie elementen CSS relative absolute fixed sticky bekeken ook de onderstaande handleidingen en artikelen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress site beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je WordPress website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Positie elementen CSS relative absolute fixed sticky?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Positie elementen CSS relative absolute fixed sticky en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven