Häufig ist es notwendig, ein Element
absolut zu positionieren. Ein häufiger Anwendungsfall hierfür
ist z.B. ein Menü, das beim Überfahren mit der Maus
ein weiteres Menü öffnen soll. In einem solchen Fall, ist
es nicht gerade angebracht, vom Fensterrand aus zu positionieren.
Stattdessen, soll die Positionierung lieber von dem Listenpunkt ausgehen,
auf dem gerade die Maus ist.
Gib dem äußeren Block-Element die CSS-Eigenschaft
position:relative, Werte für top
oder für left sind hier überflüssig.
Nun kannst du dem inneren Element position:absolute
geben und die Position einfach mit left,
top, right oder bottom regeln.
Dabei sind auch negative Werte erlaubt.
Jetzt stellt sich die Frage, von wo aus gemessen wird,
wenn man auch die Eigenschaften margin,
border und padding benutzt.
Wie in obigen Beispiel zu sehen, wird, sofern man die werte
von left und top auf 0
gesetzt hat, innerhalb des Rahmens begonnen.
Die einzige Eigenschaft, die also ignoriert wird ist
padding.
Ich möchte hier noch 2 Anwendungsbeispiele für diese Art der Positionierung vorstellen. Für das erste verlinkte ich einfach mal auf die geteilten Navigationsleisten bei SELFHTML. Um hierher zurück zu kommen, benutze bitte den Zurück-Button deines Browsers. Falls du weitere Informationen zu diesem Beispiel haben möchtest, klicke im Beispiel auf „zurück“.
Ich hab hier mal ein Beispiel-Layout von SELFHTML umgebaut. Dort wurden nämlich Tabellen verwendet, die werden durch absolute Positionierung aber eigentlich überflüssig. Leider müssen hier Techniken eingesetzt werden, die der Internet Explorer mal wieder nicht versteht. Aber auch mit Opera 8 gibt's einen Anzeigefehler. Im Opera 9 und im Firefox läft's aber einwandfrei.
Wie du siehst, gibt es noch große Probleme im Internet Explorer. Deshalb wäre es ratsam ihn zumindest bis Version 6 davon auszuschließen. Dafür gibt es eine spezielle Notation der Conditional Comments:<!--[if gte IE 7]>--> Das bekommen die Standardkonformen Browser und IE ab v7 <!--<![endif]-->
Hier wird das Kommentar nach der if-Anweisung wieder geschlossen. Das führt dazu, dass alle Versionen des Internet Explorers den Conditional Comment zwar interpretieren, andere Browser, die keine Conditional Comments benutzen, das Beispiel trotzdem anzeigen, da es außerhalb des Kommentars steht.