HTML5-Handbuch - die neuen Features von HTML5

Seiteninhalt und erst am Ende die Navigation notieren, obwohl am Ende die Navigation dank Positionierung links vor dem Seiteninhalt angeordnet ist. Ein solcher HTML-Quelltext gilt als besonders suchmaschinen- und screenreaderfreundlich. Es gibt folgende Arten der Positionierung:
•    Absolute Positionierung: Dabei wird das Element aus dem normalen Elementfluss herausgelöst. Seine Position orientiert sich am Rand des nächsthöheren Elternelements, welches selbst mittels Positionierung aus dem normalen Elementfluss herausgelöst wurde. Gibt es kein solches Elternelement, beziehen sich die Positionsangaben auf das Dokumentelement. Wenn der Anwender im Inhalt scrollt, scrollen absolut positionierte Elemente mit.
•    Relative Positionierung: Dabei wird das Element aus dem normalen Elementfluss herausgelöst. Angaben zu seiner Positionierung orientieren sich an der Position, die das Element im Normalfall einnehmen würde. Wenn der Anwender im Inhalt scrollt, scrollen relativ positionierte Elemente mit.
•    Fixe Positionierung: Dabei wird das Element aus dem normalen Elementfluss herausgelöst und ohne Rücksicht auf eventuell positionierte Elternelemente direkt an einer gewünschten Stelle im Anzeigefenster positioniert. Wenn der Anwender im Inhalt scrollt, scrollen fix positionierte Elemente nicht mit.
    Für die Positionsangabe selbst stehen ebenfalls CSS-Eigenschaften zur Verfügung.
Beispiel
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    Bild 14.35: Absolute, relative und fixe Positionierung
Erläuterung
    Das Beispiel definiert eine ganze Reihe von positionierten
div
-Bereichen. Die CSS-Definitionen stehen dabei im
style
-Bereich im Dokumentkopf. An den
id
-Namen ist erkennbar, wie die Bereiche positioniert sind. Selektoren wie
#s1
,
#s2
,
#s3
, usw. beziehen sich auf Bereiche, die statisch positioniert werden. Das ist die Default-Einstellung (gleichzusetzen mit keiner Positionierung), also das Verbleiben des Elements im normalen Textfluss. Selektoren wie
#r1
,
#r2
,
#r3
, usw. beziehen sich auf relativ positionierte Elemente,
#a1
,
#a2
,
#a3
, usw. beziehen sich auf absolut positionierte Elemente, und mit
#f1
wird ein fix positioniertes Element adressiert.
    Mit der CSS-Eigenschaft
position:
wird die Positionsart bestimmt. Erlaubt sind die Schlüsselwörter
relative
(relative Positionierung gemessen an der Normalposition oder