Websites met stijl

Naslag: position

Op dit naslagblad

De eigenschap position

De eigenschap position

De plaats van elementen kan worden gespecificeerd met behulp van de eigenschappen top, bottom, left en right. Hoe dat gebeurt wordt bepaald door de eigenschap position

Voorbeeld

voorbeeld 1 h1{
position: fixed;
bottom: 10px;
right: 20px: }

De kop h1 wordt gepositioneerd op 10px van de bovenkant van het venster en op 20px van links.

Bij position: fixed wordt de positie gemeten t.o.v. het venster. (Soms spreekt men preciezer van viewport, het gedeelte van de webpagina dat je op het scherm ziet.)

Vorm

position: waarde;

Waarden

Standaard

static	Het element wordt op de gewone manier geplaatst (standaard). De waarden van top, bottom, left, right hebben geen effect. Standaard worden elementen geplaats in de volgorde waarin ze in het document staan. Een regel worden gevuld van links naar rechts tot deze vol is. Daarna volgt de regel daaronder. Net als bij schrijven. Een blok-element staat altijd op een aparte regel, ook als de vorige regel nog niet vol is.
fixed	Het element wordt gepositioneerd t.o.v. het venster (de viewport) bij schuiven (scrollen) van de webpagina blijft het gefixeerde element op zijn plaats. De viewport is het gedeelte van de website dat je op het scherm ziet. Ik zeg meestal gewoon 'het venster'.
absolute	Als bij fixed. Nu wordt gepostioneerd t.o.v. het parent element. Preciezer gezegd: t.o.v. het eerste niet statische parent-element. De procedure is als volgt: eerst wordt gekeken naar de parent (het omhullende element). Is dat niet relative, absolute of fixed dan kijken we verder bij diens parent. Zo gaan we door tot we een relative, absolute of fixed element vinden. Dat is de referentie. Vinden we geen enkele ancestor die voldoet, dan is de body het referentie-element. Opmerking: Een met postion: absolute geplaatst element verschuift wel met de webpagina mee, een met postion: fixed geplaatst element niet.
relative	Bij een met position:relative gepositioneerd element geven top, bottom, left en right, de verschuiving van het element aan t.o.v. de 'oorspronkleijke positie'. De oorspronkelijke plaats blijft leeg.
initial
inherit

Standaard waarde, vererving

standaard	static
vererft	nee

Opmerkingen

Relative, absolute en fixed elementen kunnen over andere elementen heen komen. Met de eigenschap z-index kan worden ingesteld welk element dan boven komt te liggen en welk onder.
Absolute en fixed elementen worden als het ware 'uit de pagina getild'. Als het blok-elementen zijn, raken ze de eigenschap kwijt dat ze de hele breedte in beslag nemen. Ze passen hun breedte aan, aan hun inhoud.
(Met width: 100% herkrijgen ze hun volle breedte weer).

Tip

Je wilt:
Een division met daarin een kop die absoluut gepositioneerd moet zijn t.o.v. de division.

Probleem:
Een absolute element wordt gepositioneerd t.o.v. de eerste parent die niet static is.
En de division is static, dat is de standaard waarde voor elementen.

Tip:
Neem voor de division de stijlregel position:relative op.
De division is nu niet static meer. Verder heeft de stijlregel geen effect, omdat er geen verplaatsing is opgegeven.

Voorbeelden

Voorbeeld 2

Kop

Een (h3-)kop 10px van onder en 40px van rechts positioneren in een division. M.b.v. position: absolute.

Html:

Css:

div {position: relative;} /* Zie de tip hierboven */

h3 { position: absolute;
bottom: 10px;
right: 40px;

Resultaat:

Zie rechtsonder in dit blok.

Voorbeeld 3

Exponenten hoger zetten met behulp van position: relative

Html:

3<span class="exponent">2</span> + 4<span class="exponent">2</span> = 5<span class="exponent">2</span>

Css:

span.exponent{ position: relative; /* om te verschuiven */
bottom: 5px;/* 5px naar boven */
font-size: 80%; /* wat kleinere letter */

Resultaat:

32 + 42 = 52