CSS, HTML UND JAVASCRIPT MIT {STIL}

HTML-Blöcke mit CSS position: relative können genauso positioniert werden wie absolut positionierte Blöcke.

Aber position: relative kann auch mit der CSS-Eigenschaft float kombiniert werden.

div.block { position: relative; float: left; }

Relativ positionierte Blöcke fließen mit dem Inhalt, können also auch mit der CSS-Eigenschaft float kombiniert werden.

Der grüne Block sitzt absolut positioniert im relativ positionierten gelben Block. Wenn der gelbe Block nach unten rutscht (z.B. weil ein Header über dem Inhalt größer oder die Schriftgröße geändert wird), rutscht der absolut positionierte Block mit, aber bleibt auf jeden Fall immer an derselben Position innerhalb des gelben Blocks.

Sitzt in einem relativ positionierten Block ein absolut positionierter Block ist, wird die Position des absolut positionierten Blocks nicht mehr relativ zum HTML-Dokument, sondern relativ zum Block mit position: relative berechnet.

Flexibles Layout mit statischer Positionierung und float

Im Layout bei der Positionierung der Blöcke für Header, Inhalt und Navigation wird position: absolute eher selten verwendet, denn was absolut positioniert ist, bleibt fest an seiner Position im HTML-Dokument verankert. Bei Änderungen der Schriftgröße oder wenn die Slideshow im Header der Webseite größer wird, muss also immer nachgearbeitet werden. Das ist aufwändig und fehlerträchtig.

Für das Layout eignet sich eine statische Positionierung (also keine Positionierung) kombiniert mit float: left oder float: right besser, da sich aus dieser Kombination ein flexibleres Layout entwickeln läßt.

Aber die Kombination aus relativer und absoluter Positionierung bringt der Navigation ein paar Kunststücke bei.

Suckerfish Dropdowns

Aus dem Jahr 2003 stammt die Idee, diese Kombination aus relativer und absoluter Positionierung für eine barrierefreie Navigation mit einem Pulldown-Menü zu nutzen: Das Mutterschiff der Pulldown-Menüs ist das Suckerfish-Dropdown.

Praktisch ist diese Kombination z.B. für den Seitenkopf mit der Hauptnavigation. Die obere Ebene der Navigation wird relativ positioniert, die erste und zweite Ebene eines Pull-Down Menüs können dann absolut in Relation zu den Einträgen der oberen Ebene platziert werden. Das ist ein echter Klassiker:

ul { 
   margin-left: 0; 
   padding-left: 0; }

ul li { 
   float: left; 
   position: relative; 
   background: blue; }
   
ul ul li { 
   background: none; margin-top: 0; display: block; }

ul li:hover ul { 
   display: block; }
   
ul ul { 
   background: red; 
   position: absolute; 
   display: none; 
   z-index:100; }

Das ist jetzt natürlich nur ein Fragment der Suckerfish-Navigation – da fehlt noch jede Menge CSS und natürlich fehlen hier noch die Links mit ihren CSS-Stilen.