posicionamiento con divs de fondo

[oms02]

Hola a todos. Tengo un problemillas con el mostrado de un div (su altura).

Con estos codigos:

Código HTML:

<div id="cuadro2">
        <span>Comentario escondido</span>
</div>
<div id="cuadro1">
    <span>Comentario principal</span>
</div>
 

Código CSS:

#cuadro2 {float:left;width:250px;height:50px;border:1px solid red;} 
    #cuadro1 {
        position:relative;
        width:190px;height:100px;
        background-color:#DDD;
        z-index:2;
    }
        #cuadro1 span {
            width:150px;
            background-color:#777;
            border:1px solid black;
        }
 

Si lo probais, vereis que el span aparece "en primer plano" pero a una altura mas baja (digamos que tiene en cuenta la altura del cuadro "secundario"(cuadro2)). Lo que quiero es saber que tengo que aplicar para que aparezca arriba, al principio.

Habia pensado en margin-top:-Xpx, pero me resulta un arreglo "poco ortodoxo" y queria saber si hay alguno otro mas ....mejor.

Muchas gracias!!

[Karmac]

Te refieres a que "comentario principal" este en la parte superior de cuadro gris, ¿verdad?

Código HTML:

<div id="cuadro1">
    <span>Comentario principal</span>
</div>
<div id="cuadro2">
    <span>Comentario escondido</span>
</div>
 

El elemento se posicionaba justo detrás del #cuadro2, tú no veias el elemento porque estaba por detrás, pero estar estaba, y desplazaba hacia abajo al #cuadro1.

Dejo una imagen por si no se me entiende:


Saludos y feliz año.