Tooltip/Infobox per CSS - Die Lösung!

[Der Martin]

Guten Abend,

und erstmal herzlichen Dank allen, die sich meinetwegen den Kopf zerbrochen haben. Ich habe selbst noch weiter experimentiert, und ich habe jetzt eine Lösung. Die Erklärung kommt allerdings rein aus der Praxis: Es geht, aber keiner weiß, warum.  ;)

Im Urzustand hatte ich (stark abstrahiert) folgendes Gefüge:

<div id="navi">
 ...
 Navigation
 ...
</div>

<div id="content>
 ...
 Seiteninhalt mit einigen Tooltips
 ...
</div

Im Stylesheet hatte ich für #navi und für die Tooltips position:absolute notiert. Aber die #navi hat IMMER meine Tooltips überlagert; nicht mal mit dem z-index war da was zu machen (Detlef hatte einen Ansatz, danke, aber die Lösung war's nicht ganz).

Die Lösung ist jetzt ganz trivial: Ich notiere die beiden DIVs nicht nacheinander, sondern verschachtele sie ineinander:

<div id="content>
 <div id="navi">
  ...
  Navigation
  ...
 </div>

...
 Seiteninhalt mit einigen Tooltips
 ...
</div

Das funktioniert jetzt in MSIE 5.5, Firefox 0.9.3, und Opera 7.23 - und ich hoffe, es ist nicht auf diese Versionen beschränkt.

Jetzt wäre es nur noch interessant, warum (aus theoretischer Sicht) das so funktioniert und nicht anders.

Schönen Abend noch,

Martin