Recentemente ho dovuto apportare una correzione al sito di Computer World dopo l'inserimento di un banner ad espansione Flash sulla colonna laterale. La colonna laterale è infatti larga 300 pixel, ma il banner è largo il doppio. In questo modo l'elemento che lo conteneva si andava a sovrapporre in modo assoluto ai contenuti centrali. Come ho risolto?
Si trattava evidentemente di un problema di stacking, ossia di livelli di posizionamento. Un oggetto Flash ha un livello maggiore di z-index per impostazione predefinita, in quanto si tratta di quello che, nella terminologia di IE, viene considerato contenuto attivo.
Infatti impostando un posizionamento relativo ed un valore di z-index ai contenuti centrali il problema spariva:
#altre-news {
position: relative;
z-index: 10;
}
In questo modo però il banner non si espandeva più al passaggio del mouse, in quanto ora i contenuti centrali erano su un livello superiore. Dato che la action avviene al passaggio del mouse, occorreva ripristinare il valore di stacking originario su mouseover e quello specificato nel CSS su mouseout:
$('#google-ads').hover(function() {
$('#altre-news').css('position', 'static');
}, function() {
$('#altre-news').css('position', 'relative');
});
Un elemento statico non può avere alcun valore per la proprietà z-index, in quanto tale proprietà viene ignorata. Al contrario, un elemento posizionato accetta tale proprietà. Come si può notare, la soluzione è alquanto semplice.