CSS positionering

Geef je webpagina’s de vorm die jij wilCSS positioning

“Learn the rules so you know how to break them properly.”

—Dalai Lama

The rules: de natuurlijke flow van HTML-elementen

De natuurlijke flow van HTML

• De volgorde waarin HTML-elementen voorkomen in de bron van de pagina, wordt gerespecteerd

• Het eerste HTML-element wordt bovenaan links geplaatst

• Het volgende element verschijnt er naast of er onder

Positioneren binnen de natuurlijke flow

• margin • padding • display (inline, block, inline-block, none…)

We kunnen heel wat, maar blijven toch beperkt op vlak van vormgeving

Door elementen uit de natuurlijke flow te halen, bereiken we grafisch quasi onbeperkte mogelijkheden

“Breaking the rules”

Hoe positioneren we elementen buiten de natuurlijke flow van

de pagina?

Elementen uit de natuurlijke flow halen

123

relatief positioneren

absoluut positioneren

fixed positioneren

4 floaten

div { position: static; }

Geen positionering

Relatief positioneren

11

b { position:relative; }

Het b element gedraagt zich als een static (niet-gepositioneerd) element totdat je het positie geeft.

b { position: relative; top: 10px; left: 20px; }

Verschuiven tov de plaats waar het normaal gezien voorkomt in de natuurlijke flow van de pagina

b { position: relative; right: 10px; bottom: 20px; }

Verschuiven tov de plaats waar het normaal gezien voorkomt in de natuurlijke flow van de pagina

b { position:relative; }

Het volgende element wordt gepositioneerd op de plaats waar het normaal gezien zou voorkomen als b gewoon in de flow van de pagina was blijven staan.

Absoluut positioneren

12

b { position:absolute; }

Het b element wordt uit de natuurlijke flow van de pagina gehaald, maar komt wel voor waar het normaal gezien zou voorkomen als het in de natuurlijke flow was blijven staan.

b { position:absolute; }

Het volgende element gedraagt zich bijgevolg alsof b niet bestaat.

b { position:absolute; }

Als b geen breedte (width) heeft gekregen, wordt het zo breed als zijn content.

b { position: absolute; top: 10px; left: 20px; }

Positioneren tov de eerste gepositioneerde voorouder

(als die er niet is: tov de body)

b { position: absolute; bottom: 10px; right: 20px; }

Positioneren tov de eerste gepositioneerde voorouder

(als die er niet is: tov de body)

b { position: absolute; bottom: 0; right: 0; top: 0; left: 0; }

b neemt de volledige breedte en hoogte in van de gepositioneerde

voorouder (of body)

Fixed positioneren

13

b { position:fixed; }

Het b element wordt gepositioneerd ten opzichte van het browservenster

b { position: fixed; top: 10px; right: 20px; }

Positioneren tov het browservenster

b { position: fixed; bottom: 10px; left: 20px; }

Positioneren tov het browservenster

b { position:fixed; }

Het element wordt uit de flow van de pagina gehaald. Het volgende element gedraagt zich dus alsof b niet bestaat. (exact zoals bij absoluut positioneren)

b { position:fixed; }

De breedte van het element verkleint tot de content er net in past. (exact zoals bij absoluut positioneren)

Overlapping beïnvloeden

b { z-index: 3; }

Gebruik z-index om de stapelvolgorde van gepositioneerde elementen te beïnvloeden. Hoe hoger de waarde voor z-index, hoe dichter een element bij de kijker komt.

div { z-index:1; }

div { z-index:2; }

Over z-index

• Niet-gepositioneerde elementen (position:static) hebben geen z-index ofwel een z-index van 0

• Bij gelijke z-index komt het laatste element in de broncode hoger te liggen in de stapelvolgorde

Float

14

Floats worden vandaag nog het meest gebruikt om algemene

(koloms)layouts te maken

De reden is de historisch slechte browserondersteuning van display: inline-block

Voor de rest volstrekt achterhaald!

b { float: left; }

Het b element komt verticaal gezien nog altijd voor op zijn plaats in de natuurlijke flow van de pagina maar wordt dan volledig naar de zijkant verplaatst. De inhoud van de volgende elementen vloeit rondom de float.

Foto’s: http://www.css-tricks.com

Floats moet je altijd breedte geven (met uitzondering van beelden)

De inhoud van de niet-floated elementen loopt rondom de float, maar de achtergrond en rand niet

Als een floated element te weinig plaats heeft, schuift het op naar de

eerstvolgende regel waar er wel voldoende plaats is.

Het element dat volgt op een float moet je clearen als je wil dat zijn inhoud niet langs de float vloeit.

b { clear: left; }

De inhoud van het b element zal nooit langs een links gefloat element vloeien dat eerder in de broncode voorkomt.

b { clear: right; }

De inhoud van het b element zal nooit langs een rechts gefloat element vloeien dat eerder in de broncode voorkomt.

b { clear: both; }

De inhoud van het b element zal nooit langs een float vloeien die eerder in de broncode voorkomt.

De hoogte van een element dat floats bevat wordt niet automatisch

aangepast aan zijn inhoud.

Probeer inline-block te gebruiken voor kolomslayout en floats voor dit

soort dingen:

position:fixed;float:left;

width: 400px; margin-left: 200px;

float:left; width: 300px;