Vi giro un minuscolo javascript che salverà molte delle vostre vite. Si tratta di una function da caricare negli head della pagina HTML per ottenere un resettamento progressivo degli z-index e annullare i problemi di sovrapposizione degli elementi che si verifica spesso quando nella pagina convivono vari elementi dinamici mescolati fra loro – ad esempio: menù a tendina tipo PixoPoint e presentazioni jQuery. In situazioni simili, spesso si verificano spiacevoli errori di valutazione della z-index da parte del browser – specialmente da parte di IE7 – ottenendo come risultato, ad esempio, la fastidiosa scomparsa di un menù a tendina dietro una presentazione a slide di jQuery. Questo piccolo script “miracoloso” risolverà il problema. Occhio che il reset delle z-index avviene in maniera progressiva dall’alto verso il basso, tenetene conto quando posizionate i div per non ottenere l’effetto contrario a quello voluto!
<script lang="javascript">
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
</script>