CSS Positionierungsfrage über position:relative

Hi,

ich habe folgendes Problem: Ich habe 3 ids welche relativ positioniert sind in einem anderen div.

Kein Problem, jetzt möchte ich aber das sich diese 3 divs überlappen und nicht nebeneinander stehen!

Bisher habe ich es so gemacht:

#frame1
{
position:relative;
    left: -100px;
    top:0px;
    height: 20px;
    width:100px;
    background-color: #0000FF;
}
#frame2
{
position:relative;
    left: -100px;
    top:-20px;
    height: 20px;
    width:100px;
    background-color: #00FF00;
}
#frame3
{
position:relative;
    left: -100px;
    top:-40px;
    height: 20px;
    width:100px;
    background-color: #FF0000;
}

----------------------------
<div style="position:absolute; left: 150px;background-color: #EAEAEA; width: 400px;">
<div id="frame1">bla</div>
<div id="frame2">bla</div>
<div id="frame3">bla</div>
</div>

Geht auch wunderbar. doch bei den frames das mit dem top gefällt mir nicht, das ich da in die negativen werte gehen muss. Dazu wird das div mit der farbe EAEAEA 60 hoch, obwohl es nur 20 hoch sein sollte.

Kennt da jemand eine bessere lösung für mein Problem?

cpt.oneeye

negative werte sind doch kein problem. wird von jedem browser verstanden. probleme gibts z.b. wenn du margin-top:-20 verwendest. geht beim IE aber nicht bei anderen Browsern.