Z index e blocchi annidati

[pezzo]

Ho un problema con lo z-index! Vorrei che il blocco etichetta_consegna stia sopra agli altri ma impostando lo z-index non succede niente!

Ecco l'HTML:

<div id="content">
<h2>titolo</h2>

<div id="blocco_consegna">

<div id="consegna">
<h2>CONSEGNA</h2>


bla bla bla </p>


<span class="bold">bla: </span>"bla bla bla"</p>

<div id="etichetta_consegna">
bla bla bla
</div>

<h2>bla bla bla</h2>
<ul>[*]bla bla bla[*]bla bla bla[/list]

</div>

</div>
</div>

e il CSS:

/*regole relative al div blocco consegna */
div#blocco_consegna{width: auto; height: auto;
padding: 1em 1em 1em 1em; margin-top: 1em; text-align: justify; font-size: 120%;
line-height: 1.4; background: url("../immagini/guido.jpg") left center; background-repeat:no-repeat;}

/*regole relative al div consegna */
div#consegna {position: relative; z-index: 10; margin: 0 0 0 155px; padding: 0.5em 0 0 0; border-width: 1px 2px 1px 2px; border-style: solid;
border-color: #36C; height: auto;}
div#consegna p {padding: 0 1em 0 1em; color: #3300CC;}
div#consegna ul {margin: 0 0 0 1em; padding: 0.5em 0 0 0.1em; font-size: 120%; font-weight: bold; line-height: 1.8;
color:#03C900; list-style-type:none;}
div#consegna li{width:auto;background: url("../immagini/freccia.jpg") left center;
background-repeat:no-repeat; padding-left: 2em; }

/* regole relative al blocco etichetta consegna */
div#etichetta_consegna{position: relative; width:150px; left:33em; top:-10em; border-width: 1px 2px 1px 2px; border-style: solid;
border-color: #36C; z-index: 20;}

Che sbaglio? Grazie!

[pezzo]

Lasciate perdere, sono stupido! Non avevo assegnato un colore di sfondo al div!

Si può utilizzare il posizionamento relativo e azzerare lo spazio vuoto che rimane nella pagina nel punto in cui il div si sarebbe trovato nel normale flusso?