css positionering
TRANSCRIPT
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…)
Door elementen uit de natuurlijke flow te halen, bereiken we grafisch quasi onbeperkte mogelijkheden
“Breaking the rules”
Elementen uit de natuurlijke flow halen
123
relatief positioneren
absoluut positioneren
fixed positioneren
4 floaten
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.
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; }
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)
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)
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.
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
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.
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.
position:fixed;float:left;
width: 400px; margin-left: 200px;
float:left; width: 300px;