Websites met stijl

Naslag: top, bottom, left, right

Op dit naslagblad

De eigenschappen top, bottom, left, right
Vorm
Standaard, vererving
Top
Bottom
Left
Right
Referentie element

De eigenschappen top, bottom, left, right

De eigenschappen top, bottom, left, right bepalen de positie van een element dat wordt geplaatst met position: fixed of position: absolute. Bij positionering met position: relative bepalen ze de verschuiving.

Vorm

top: waarde;
bottom: waarde;
left: waarde;
right: waarde;

Waarde

auto	de browser bepaalt de positie (standaard)
lengte	in px, cm. Negatieve waarden zijn toegestaan
%	In % van het omvattende element. Negatieve waarden zijn toegestaan.
initial	Standaard waarde
inherit	Erft de waarde van de parent

Standaard waarde, vererving

standaard	auto
vererft	nee

Top

Bij position: fixed of absolute	de afstand van de bovenkant van het referentie element.
Bij position: relative	de verschuiving naar onder

Gebruik voor de verticale positie òf top òf bottom, niet allebei

Bottom

Bij position: fixed of absolute	de afstand van de onderkant van het referentie element.
Bij position: relative	de verschuiving naar boven

Gebruik voor de verticale positie òf top òf bottom, niet allebei

Left

Bij position: fixed of absolute	de afstand van de linker kant van het referentie element.
Bij position: relative	de verschuiving naar rechts

Gebruik voor de horizontale positie òf left òf right, niet allebei

Right

Bij position: fixed of absolute	de afstand van de rechter kant van het referentie element.
Bij position: relative	de verschuiving naar links

Gebruik voor de horizontale positie òf left òf right, niet allebei

Referentie element

De absolute en fixed position worden bepaald tot de randen van wat ik noem het 'referentie element'

Bij fixed gepositioneerde elementen is de body het referentie element. In de praktijk komt het erop neer dat top, bottom, left, right de afstanden tot de randen van het browservenster betreffen.
Bij absolute gepositioneerde elementen is het referentie element de eerste niet-statische ancestor.

De eerste niet-statische ancestor

Alle elementen waarbinnen een element E zich bevindt worden de ancestors van E genoemd:

Stel je hebt in de body een div-element, met daarin het main-element, dat op zijn beurt een p-element (paragraaf) bevat. Dat kan schematisch opgeschreven worden als body > div > main > p.
Dan zijn main, div en body allemaal ancestors (voorouders) van p. Main is de parent (ouder) van p.

Procedure om het referentie element te bepalen

Kijk of de parent van het element p (main) niet-statisch is.
Een niet statisch element bevat de stijlregel position: relative;, position: absolute; of position: fixed;
Is main niet-statisch, dan is main het referentie element.
Is main statisch dan kijken we verder bij de volgende ancestor: div. Is die niet statisch dan gaan we een ancestor verder, net zo lang tot er een niet-statische amcestor is gevonden. Dat is dan het referetie element.
Is geen enkele ancestor niet-statisch, dan is body het referentie element.