div iframe select 的zindex 任意布置

感谢http://www.sikeu.com/user1/yesu/archives/2008/200812613952.html


引用内容
   Div被Select挡住，是一个比较常见的问题。  
  有的朋友通过把div的内容放入iframe或object里来解决。  
  可惜这样会破坏页面的结构，互动性不大好。  
   
  这里采用的方法是：  
   
  虽说div直接盖不住select  
  但是div可以盖iframe，而iframe可以盖select,  
  所以，把一个iframe来当作div的底，  
  这个div就可以盖住select了.  



   
引用内容

１"iframe   做为层的载体"后，  
  层与主页面的互动是窗口间的互动  
  ２“用一个iframe当div的底”后，  
  层与主页面的互动是窗口内的互动  
   
  另外，对于方法１，  
  层的大小变化就会要求iframe的大小随着变化  
  从主页面到这个层会导致window的blur.  
   
  对于方法２，  
  只是在原有的div前加上这一句  
  <iframe     style="position:absolute;z-index:9;width:e­xpression(this.nextSibling.offsetWidth);height:e­xpression(this.nextSibling.offsetHeight);top:e­xpression(this.nextSibling.offsetTop);left:e­xpression(this.nextSibling.offsetLeft);"   frameborder="0"   ></iframe>



    试用大家的方法之后发现还是有一点小问题，出来的是白色浮动，而不是本来应该出来的绿色浮动层。
    问题依然存在：
   

三、调试完成

    最后发现应该稍作修改，一下代码是最终的方案：
    1、在iframe的style里面一定要加上z-index而且要设为-1,这样它就不会把原来的div层也一起覆盖掉。
    2、把<iframe></iframe>放在div层的上面就可以了。

   
程序代码

<iframe     style="position:absolute;z-index:-1;width:e­xpression(this.nextSibling.offsetWidth);height:e­xpression(this.nextSibling.offsetHeight);top:e­xpression(this.nextSibling.offsetTop);left:e­xpression(this.nextSibling.offsetLeft);"   frameborder="0">
        </iframe>
        <div class="submenutvc" id="tvc">
            <dl><a href="#">汽车</a></dl>
            <dl><a href="#">化妆品</a></dl>
            <dl><a href="#">房地产</a></dl>
            <dl><a href="#">日用品</a></dl>
        </div>