» » » Proprietà z-index, questa sconosciuta

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

Send to

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

Ratings

0 comments

Only registered users can leave comments.

Login or register an account

©2008-2016 - Via Lambertenghi, 61 - 23030 Villa di Tirano (SO) - Italia - VAT N.: 00902570142