Posizionamento relativo all'elemento padre con CSS

Quando usiamo il posizionamento assoluto di un oggetto, il punto zero è il bordo in alto a sinistra del browser, poi aiutandoci con gli attributi left, right, bottom e top possiamo stabilire le distanze dal punto zero e collocare l'oggetto nel punto desiderato.

In questo modo però, al ridimensionnamento della finestra del browser, l'oggetto si sposta perchè cerca di mantenere le distanze dai bordi imposte nel css.

Esempio: ho una tabella che funge da contenitore e voglio inserire il logo in alto a sinistra facendo in modo che sia sovrapposto agli altri oggetti e che non si sposti al ridimensionamento del browser.

Con l'utilizzo della direttiva z-index posso fare in modo che l'oggetto in questione, cioè l'immagine venga posizionata in primo piano, però non sempre il browser internet explorer visualizza correttamente la pagina. Questo accade causa di un bug per il quale non viene assegnata una numerazione unica agli oggetti della pagina.(vedi qui)

Per evitare questo inconveniente si può procedere in questo modo:
(premetto che in questo esempio ho tralasciato la parte di css relativa alla tabella e alla pagina)
- inserire un DIV (id="prelogo") con posizionamento relativo e z-index
- mettere all'interno del  DIV (id="prelogo") un altro DIV (id="logo") contenente il tag img, con posizionamento assoluto
- aiutarsi con gli attributi left e top per collocare l'oggetto nel posto desiderato

In questo modo il posizionamento del secondo DIV è assoluto, ma non più rispetto allla pagina intera, bensì rispetto al suo contenitore DIV (id="prelogo") che ha a sua volta un posizionamento relativo, quindi non può muoversi al ridimensionamento della pagina.

Il seguente esempio è stato testato sui browser firefox, konqueror, IE6 e IE7

<style type="text/css">
div#prelogo {
position: relative;
margin-right: 0px;
top: 0;
z-index: 10;
}

div#logo {
position: absolute;
width: 250px;
height: 209px;
margin-right: 0px;
top: -95px !important;/*per tutti gli altri browser*/
top: -97px; /*per IE*/
left: 10px !important;/*per tutti gli altri browser*/
left: 12px; /*per IE*/
}
</style>

<table  border="0" class="contenitore">
<tr>
<td><div id="prelogo"><div id="logo"><img src="/immagine.gif" /></div></div></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>