position: absolute;

position: absolute;
hiermee haal je een element uit de "document-flow", zoals dat heet. Je kunt het vergelijken met knikkers in een schaal. Als je er ééntje uit tilt, rollen de overgebleven knikkers naar een andere plek en de nieuwe kun je op elke plek houden boven de rest. Dit lijkt in eerste instantie perfect, want je zou zeggen: geef
al mijn divs een position: absolute. Dan kan ik precies bepalen op welke plek mijn divs verschijnen.

Toch werkt dat niet altijd. Een voorbeeld:
Je hebt een pagina die uit twee delen bestaat: header en content. Twee divs dus, #header en #content. Nou wil ik dat de content op 100 pixels van de bovenkant
af geplaatst wordt, dus ik doe:

#content {
position: absolute;
top: 100px;
}

Dit werkt keurig in alle moderne browsers, maar heeft een nadeel. Als de headerdiv te groot wordt schuiven de header en de content over elkaar heen. Ook als je zorgt dat er niet teveel tekst in de headerdiv staat, kan de gebruiker bijvoorbeeld het lettertype groter maken. Dit los je op door relative en absolute te combineren.

« Lees de omschrijving en reacties