Websites met stijl

18. Elementen positioneren

In dit hoofdstuk:

De eigenschap position

Elementen kunnen op verschillende manieren worden gepositioneerd. De eigenlijke plaats wordt daarbij ingesteld met de eigenschappen top, bottom, left, right.

Top, bottom, left, right

De voorbeelden spreken voor zich:

Opmerkingen:

Position

De eigenschap position bepaalt de preciese uitwerking van top, bottom, left en right.
Position kent vier waarden: static, relative, fixed en absolute:

Position: static

Static is de standaard manier van positioneren: De browser plaatst de elementen een voor een achter elkaar op de regel.
Als een element niet meer op de regel past, zet de browser het op de volgende regel. Het gaat dus net als met het schrijven van een brief: van links naar rechts, regel voor regel.
Een blok-element komt alijd op een aparte regel.

Opmerkingen

Position: relative

Bij relative verschuift het element t.o.v. de standaard positie met de waarden van top/bottom en left/right. De oorspronkelijke plaats van het element blijft leeg.

Position: fixed

Bij de fixed wordt het element op een vaste plaats gepositioneerd met behulp van top/bottom en left/right.
top: 10px; right: 20px; betekent: 10px van de bovenkant van het venster waarin de website staat en 20px van de rechterkant.

Bij het scrollen (verschuiven) schuift het fixed element niet mee. De webpagina schuift er als het ware onderdoor.

Position: absolute

Absolute werkt bijna hetzelfde als fixed. Alleen schuift een absolute element wel mee bij het scrollen.

Er is nog een verschil tussen fixed en absolute. Dat komt verderop in dit hoofdstuk aan de orde, bij referentie element.

Voorbeelden

figuur 1: het voorbeeld
html Dit is een stukje tekst. Dit is een stukje tekst. <span>Blokje</span> Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst.
css span {
background-color: gold;

position: static/relative/fixed/absolute;
bottom: 20px;
left: 30px;
}

De voorbeelden in dit hoofdstukje willen het verschil laten zien tussen de vier verschillende manieren van positioneren.
Elk voorbeeld bevat 20 zinnen 'Dit is een stukje tekst.' (zie hierboven).
Na de tweede zin is een span-element opgenomen met de tekst 'Blokje'.

Span is een inline element dat voornamelijk gebruikt wordt om een stukje tekst een afwijkende opmaak te geven, zoals hier de goudkleurige achtergrond en de manier van positioneren.

In alle voorbeelden wordt het element in de css voorzien van een goud-kleurige achtergrond en van bottom: 20px; left: 30px;

Het enige verschil tussen de voorbeelden is de positionering van het blokje: achtereenvolgens static, relative, fixed, absolute.

Voorbeeld 1: position: static
voorbeeld 1: static

Dit is een stukje tekst. Dit is een stukje tekst. Blokje Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst.

span {
background-color: gold;

position: static;   /* deze regel mag wegblijven */ bottom: 20px;   /* deze regel heeft geen zin */
left: 30px;   /* deze regel heeft geen zin */
}

De laatste 3 regels staan er alleen om alle voorbeelden hetzelfde te houden, maar ze kunnen beter weg:
Position: static; kan weg omdat het de standaard manier van positioneren is.
Bottom: 20px; en left: 30px; moeten weg omdat bottom en left geen betekenis hebben bij statische elementen.

Voorbeeld 2: position: relative
voorbeeld 2

Dit is een stukje tekst. Dit is een stukje tekst. Blokje Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst.

span {
background-color: gold;

position: relative;
bottom: 20px;
left: 30px;
}

Het blokje is 20px omhoog en 30px naar rechts verschoven.
De oorspronkelijke plek van het blokje blijft leeg.

Voorbeeld 3: position: fixed
voorbeeld 3

Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst.

Blokje
span {
background-color: gold;

position: fixed;
bottom: 20px;
left: 30px;
}

Het blokje komt 20px van de onderkant en 30px van de linker rand.
Het blijft op zijn plaats bij het scrollen.
Controleer dat maar door te scrollen met de schuifbalk van voorbeeld 3.

Position: absolute

Absolute lijkt veel op fixed. Maar een absolute element beweegt wel bij het scrollen mee met de pagina.

voorbeeld 4: absolute

Dit is een stukje tekst. Dit is een stukje tekst. Blokje Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst. Dit is een stukje tekst.

span {
background-color: gold;

position: absolute;
bottom: 20px;
left: 30px;
}

Het blokje komt 20px van onder en 30px van links.
Het schuift mee bij het scrollen.
Controleer dat maar door te scrollen met de schuifbalk van voorbeeld 4.

Referentie element

Fixed en absolute elementen worden gepositioneerd t.o.v. wat ik maar noem het 'referentie element'. Bottom: 30px betekent dus 30px van de onderrand van het 'referentie element'.

Wat betekent 'eerste niet-statische ancester' in de praktijk?
Stel dat een h1-kop met position: absolute absolute gemaakt is. Daar bepaal je als volgt het referentie element van:

Stel dat je vindt dat main het referentie element is, dan gelden top, bottom, left en right vanaf de randen van main.

Bijwerking van fixed en absolute

Een blok element neemt (als geen breedte is ingesteld) de volledige breedte in van het element waarin het staat. Als zo'n element wordt geposioneerd met position: fixed; of position: absolute; dan wordt de breedte bepaald door de inhoud, net zoals bij een inline element. Een div-element bij voorbeeld met de inhoud 'division' wordt dan zó breed dat het woord 'division' er precies in past.

De ontwerpers van de css-taal hebben geen verklarng voor dit gedrag gegeven, maar ik vermoed de volgende reden: het element nam de breedte aan van het element waar het in stond. Maar het staat niet meer in dat element, maar op een willekeurige plaats in het venster. De oude breedte is niet meer relevant.

Wil je toch dat het fixed of absolute gepositioneerde element de volle breedte inneemt, dan moet je in het stijlblad de regel width: 100%; opnemen.

Een truc met position: relative

Stel dat je een h1-kop in de header hebt staan. Je wilt die h1-kop 20px van de onderkant van de header hebben en 50px van rechts. Dat doe je met de volgende stijlregels: stap 1: h1 absolute h1 { position: absolute;
bottom: 20px;
right: 50px;
}

Maar nu komt het probleem. De header is gewoon static. Dat betekent dat de afstanden niet gelden t.o.v. de rand van de header, maar t.o.v. de rand van het eerste parent element van de header dat niet statisch is (misschien is dat wel het browser venster); en dat willen we niet.

Gelukkig heeft men daarop een truc verzonnen:

stap 2: toevoegen van header {position: relative;} h1 { position: absolute;
bottom: 10px; right: 50px;
}
 
header { position: relative;}

Hiermee wordt de h1 10px van de onderrand van de header geplaatst en 50px van rechts.

Opmerking: De volgorde van de stijlregels doet er niet toe: de stijlregel voor de header mag voor of achter de stijlregels voor h1 worden gezet.

Z-index

Als een webpagina niet-statische elementen heeft, dan kunnen die zijn verschoven t.o.v. hun gewone positie. Daarmee kunnen ze (geheel of gedeeltelijk) over andere elementen heen komen. We spreken dan van een webpagina met lagen. Zie de figuur. De bovenste laag is helemaal zichtbaar. Lagen daaronder zijn alleen zichtbaar voor zover ze uitsteken, of voor zover lagen erboven gedeeltelijk transparant zijn.

Met de eigenschap z-index kan je de plaats van een element in de stapel aangeven:

Samenvatting

Position

Zie ook de naslag over positioneren

Z-index

Z-index bepaalt welk element boven ligt.

Zie ook de naslag z-index