Z-index non funziona su elemento float

[lore83]

Ciao a tutti.

Ho fatto un menù a tendina che si attiva al mouseover. La tendina che compare deve sovrapporsi alla pagina ovviamente (z-index maggiore di tutti gli altri div. ho fatto il sito tableless), però questa sovrapposizione non funziona sui div float. Come mai e come risolvere questo problema?

[fede89verona]

Ciao,
detto cosi si capisce il problema, ma vederlo da qualche parte non sarebbe male.. Se hai un link pubblicalo.. Comunque in genere devi definire lo z-index anche ai div principali in cui risiede il tuo div che ti da problemi.. Ad esempio se hai un div header e all'interno il tuo div, dai lo z-index sia al div header che al tuo div all'interno!!

Comunque se hai un link dove vedere il problema, potremmo anche risolvere il problema più facilmente

[Shores]

Attenzione: lo z-index è relativo ad un preciso stacking context, ovvero gli elementi con z-index assegnato si impilano solo con quelli che considerano propri fratelli di stacking context, e uno stacking context viene creato solo in specifiche occasioni.

Per capirci, se ho questo html:

<div id="zero">
<div id="uno">
<div id="uno1">
</div>
<div id="uno2">
</div>
</div>
<div id="due">
<div id="due1">
</div>
<div id="due2">
</div>
</div>
</div>

e questo css:

#uno1 {z-index:10}
#uno2 {z-index:20}
#due1 {z-index:1}
#due2 {z-index:2}
#uno {position:relative}
#due {position:relative}

otterrò che #due1 e #due2 saranno SOPRA a #uno1 e #uno2, mentre con questo foglio di stile:

#uno1 {z-index:10}
#uno2 {z-index:20}
#due1 {z-index:1}
#due2 {z-index:2}
#zero {position:relative}

otterrò l'ESATTO CONTRARIO.

Vedi anche:
https://developer.mozilla.org/En/Und...acking_context