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.113 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.

Leave a comment

All comments must be approved by site administrator.
Please write comments on topic. Spam will be never approved.


Confirmation code

Please take a look to image and insert character into the form field.