Float versus position
Kievit op 02 juli 2012 #
Dag OMT-ers,
Ik ben tamelijk nieuw met CSS, wie kan me het verschil uitleggen tussen het positioneren met float of met position (relative, fixed, absolute).
Met float kan ik de meeste dingen ook voor elkaar krijgen…
Dr. Maddox op 03 juli 2012 #
Position staat voor hoe het zich gedraagt tov andere objecten. Float staat voor de richting waar iets naartoe “drijft”.
position: relative; en float: left; wil zeggen dat de div naar links “drijft” en aansluit op het meest linkse object of kader waar het past.
position: absolute; en float: left; wil zeggen dat de div onafhankelijk van de layout naar links drijft. Vaak overlapt de div dan eerder geplaatste objecten.
In beide gevallen kan je via margin de div op de pixel nauwkeurig plaatsen in de layout. Let wel op! Soms lijkt float niks uit te maken maar dit gaat niet voor alle browsers op. Je kan beter teveel definiëren zodat je zeker weet dat alle browsers het begrijpen.
Jakko Westerbeke op 03 juli 2012 #
Float zorgt ervoor dat het object links of rechts geplaatst wordt en de andere elementen op de pagina eromheen lopen; position gebruik je om aan te geven op welke manier de plek van het ding bepaald wordt, en of het vaststaat ten opzichte van de achtergrond of niet.
Kievit op 03 juli 2012 #
Hartelijk dank heren!
Dus als ik het begrijp: float: laat naast elkaar uitlijnen, en position is simpelweg het gedrag tegenover de achtergrond en de plek waar het vaststaat/ of mee gaat.
Dus als je 3 kolommen o.i.d. hebt, dan gebruik je float.
Wil je een menu hebben die steeds mee gaat met het scrollen gebruik je position.
is dit goed redeneren?
Dr. Maddox op 03 juli 2012 #
Bijna goed. Het gedrag van de layout t.o.v. scrollen kan je wel beïnvloeden maar niet per styling. Dan moet je aan scripts denken die dit voor je oplossen.*
Eigenlijk gebruik je bij voorkeur altijd float zodat het zich niet onvoorspelbaar gaat gedragen. Eigenlijk geef je het zwaartekracht of juist niet. Wanneer je dit niet definieert zweeft het maar wat onvoorspelbaar rond op de pagina. Je kan op goed geluk bouwen maar dat zou onverstandig zijn.
Met position geef je enkel aan of de div/object wel of geen rekening houdt met de rest van de opmaak.
Ik (en de rest hier) zou lappen met tekst kunnen schrijven maar op het web staan erg mooie voorbeelden. En beter nog, experimenteer eens met een basic layout. Gewoon kleurvlakken die je andere eigenschappen geeft en kijkt hoe het zich gedraagt. Echt een aanrader om te doen. Leerzaam en leuk!
*het formaat van je browservenster heeft er wel invloed op. Let dus op dat bepaalde eigenschappen zich anders kan gedragen wanneer je het browser venster van breedte verandert. Ook dit is iets dat je eenvoudig kan testen met een basis layout.
Kievit op 03 juli 2012 #
Top! Bedankt, ik gebruikte zelf best veel floats maar ik was bang dat ik het verkeerd deed. Voor footers etc. gebruikte ik veel absolute, ja ligt er net aan wat voor één je er maakt 
maar voor naast elkaar plaatsen deed ik altijd float.
Maar nu met dit stukje theorie van jullie weet ik meer om het in de praktijk goed te doen:-)
Hartelijk dank!