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>

Note

tags z-index, sovrapposizione flash, problemi z-index, problemi flash, html, css

Dettagli pubblicazione

Categoria: CSS

Pubblicato da: loryzz in data: 06.01.2008 15:48:47

Ultima modifica di: loryzz in data: 21.01.2009 11:45:44

Statistiche

Questo articolo è stato visualizzato 3.675 volte.

Segnala presso

Votazioni

Currently 0; ?>/ TOTALSTARS
1
2
3
4
5

Commenti

Gli utenti del sito hanno rilasciato 0 commenti, di cui 0 in attesa di approvazione.

Lascia un commento

Tutti i commenti devono essere approvati da un amministratore prima di essere visualizzati al pubblico. Si tratta di una misura preventiva contro spam e pubblicità e non è necessario reinviare il commento.
Si prega di scrivere commenti in tema. Spam e messaggi promozionali non vengono approvati.