如何让浮动的div层显示在select组件的上面

 

一、发现问题

    问题：浮动层被select组件覆盖住一部分。

    代码部分：浮动层

    程序代码

    <div class="selectClass" id="selName" >

            <dl><a href="#">软件</a></dl>

            <dl><a href="#">硬件</a></dl>

     </div>

二、找到方法  

    上网搜索了一下之后发现，这个是html语言的通病，只能通过某些优先级更加高的组件来遮盖。

    在CSDN社区里看到有人给出解决方案：

 引用内容

   Div被Select挡住，是一个比较常见的问题。  

  有的朋友通过把div的内容放入iframe或object里来解决。  

  可惜这样会破坏页面的结构，互动性不大好。  

  这里采用的方法是：  

  虽说div直接盖不住select   但是div可以盖iframe，而iframe可以盖select,  

  所以，把一个iframe来当作div的底，   这个div就可以盖住select了.  

 

 引用内容

  １"iframe   做为层的载体"后，  层与主页面的互动是窗口间的互动  

  ２“用一个iframe当div的底”后，  层与主页面的互动是窗口内的互动  

  另外，对于方法１， 

层的大小变化就会要求iframe的大小随着变化  从主页面到这个层会导致window的blur.  

  对于方法２，   

           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="selectClass" id="selName" >

            <dl><a href="#">软件</a></dl>

            <dl><a href="#">硬件</a></dl>

        </div>

 

问题解决。