Proprietà z-index, questa sconosciuta
Caratteristiche e problemi inerenti l'attributo z-index.
Esistono diverse problematiche che riguardano i livelli di sovrapposizione.
Sovrapposizione delle select con filmati flash
Le soluzioni a questo problema sono due: la prima utilizza javascript, la seconda invece si serve di un piccolo Hack del codice, che utilizza un iframe.
Soluzione Javascript
<head>
<script type="text/Javascript">
<!--
function Mostra() {
if (document.getElementById) {
document.getElementById("div_sovrapposto").style.visibility="visible";
document.getElementById("div_tendina").style.visibility="hidden";
} else if (document.all) {
document.all.secondoDiv.style.visibility="visible";
document.all.tendina.style.visibility="hidden";
}
}
function Nascondi() {
if (document.getElementById) {
document.getElementById("div_sovrapposto").style.visibility="hidden";
document.getElementById("div_tendina").style.visibility="visible";
} else if (document.all) {
document.all.secondoDiv.style.visibility="hidden";
document.all.tendina.style.visibility="visible";
}
}
//-->
</script>
<style>
#div_onmouseover {
position:absolute;
top:10px;
left:10px;
width:100px;
height:100px;
background-color:green;
z-index:1;
}
#div_tendina {
position:absolute;
top:40px;
left:180px;
width:100px;
height:100px;
background-color:silver;
visibility:visible;
z-index:2;
}
#div_sovrapposto {
position:absolute;
top:10px;
left:150px;
width:200px;
height:200px;
background-color:red;
visibility:hidden;
z-index:3;
}
</style>
</head>
<body>
<div id="div_onmouseover" onmouseover="Mostra();" onmouseout="Nascondi();">
Passa il mouse qui sopra</div>
<div id="div_tendina">
<p>z-index:2</p>
<select id="tendina">
<option>opzione 1</option>
<option>opzione 2</option>
<option>opzione 3</option>
<option>opzione 4</option>
</select>
</div>
<div id="div_sovrapposto">Div Sovrapposto (z-index:3)</div>
</body>Soluzione iframe
Consiste nell'inserimento di un iframe vuoto all'interno del <div> sovrapposto, utilizzando il seguente codice
<iframe frameborder="0" src="" style="position:absolute; width:100%; height:100%; z-index:-1;"></iframe>
0 commenti
Solo gli utenti registrati possono lasciare commenti.