Proprietà z-index, questa sconosciuta

Caratteristiche e problemi inerenti l'attributo z-index.

Proprietà z-index, questa sconosciuta

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>

Publication details

Category: CSS

Published by: loris.genetti on date: 06.01.2008 15:48:47

Last edit by: loris.genetti on date: 21.01.2009 11:45:44

Statistics

Details  This article has been viewed 6.436 times.

Send to

add to digg add to reddit add to furl add to facebook add to delicious add to google add to technorati

Ratings

  • Currently 0 / 5
  • 1
  • 2
  • 3
  • 4
  • 5

Comments

Details 0 user comments, 0 still waiting.