JS/CSS "Tooltip"

[Peete]

Fällt eigentlich auch unter CSS ;)

Ich versuche einen dynamisch angezeigten Infotext mit Javascript und CSS zu schreiben (so wie ein Tooltip). Bisher bin ich soweit:

function show(){
  document.getElementById('note').style.display = "block";
}
function hide(){
  document.getElementById('note').style.display = "none";
}

#note{
background-color : #560000;
color    : #CCCCCC;
width    : 150px;
position   : relative;
top     : -10px;
left: 10px;

}

<div onMouseOver="show()" onMouseOut="hide()">
  Text mit Note
  <div id="note" style="display:none;">Infotext</div>
</div>

Die Funktion ist auch einwandfrei, nur schwebt der Infokasten logischerweise nicht über allem, sondern "verdrängt" die anderen Elemente der Seite. Ich habe schon mit z-indizes herumgespielt, aber ohne Erfolg.
Wie lässt sich das denn realisieren? Über über Tipps würde ich mich freuen, viele Grüße - Peete