解决DIV被Select遮住处理方法[转]

需求：

鼠标滑过text文本框时，弹出提示信息DIV。

问题：

弹出的DIV层被Select下拉框遮住。

解决方案：

弹出的DIV层内部嵌套iframe，信息在iframe内部显示（可以是iframe内的table或者是div）

代码：

页面代码：

<div id="name_show" style="display:none;position:absolute"></div>

。。。。。。。

<html:text' property="DV_ASSET/TITLE_NAME" name="DV_ASSET/TITLE_NAME" readonly="true"

onmouseover="show_name(this,'DV_ASSET/TITLE_NAME');" onmouseout="hiddname()">

</html:text>

JS代码

//获得绝对顶边距

function getTop(e){
    var ost = e.offsetTop;
    while(e=e.offsetParent){
        ost += e.offsetTop;
   }
    return ost;
}

//获得绝对左边距
function getLeft(e){
    var osl = e.offsetLeft;
    while(e=e.offsetParent){
        osl += e.offsetLeft;
    }
    return osl;
}

// 泡泡提示信息 (弹出---消失)
function show_name(obj,name){
    var show_value=document.getElementsByName(name)[0].value;
    var x= parseInt(getLeft(obj));
    var y=obj.offsetHeight + parseInt(getTop(obj));
    if(show_value.length>11){   //只要字符串大于11就用泡泡信息提示
    var divObj =document.getElementById('name_show');
    // var x = event.clientX;
    //var y = event.clientY;
    divObj.style.left= x+"px";
    divObj.style.top= y+"px";
    divObj.innerHTML="<table bgcolor=#63B8FF border=1 width='200px' height='80px'><tr><td style='word-break:break-all'>"+show_value+"</td></tr></table><iframe style='position:absolute;top:0px;left:0px; 200px; height:80px; z-index:-1;'></iframe>";
    divObj.style.display='block';
    }
}

function hiddname(){
   document.getElementById('name_show').style.display='none';
}

备注：

从上面的demo可以看出，弹出的DIV中

<table bgcolor=#63B8FF border=1 width='200px' height='80px'><tr><td style='word-break:break-all'>"+show_value+"</td></tr></table><iframe style='position:absolute;top:0px;left:0px; 200px; height:80px; z-index:-1;'></iframe>";

放了一个table。如果不加

<iframe style='position:absolute;top:0px;left:0px; 200px; height:80px; z-index:-1;'></iframe>

显示也是没有问题的，但是会被select遮住。

添加iframe要注意。首先它的style必须是绝对定位：position:absolute，而且把它的top:0px;left:0px;这个意思就是在div层中的左上角开始定位，200px; height:80px;这个高度和宽度要和div内部的table大小一致。z-index：-1，它很重要，就是iframe的要层叠在最下层。DIV的大小由内部放的iframe决定（table放在iframe上面），而iframe和table大小相同。
<td style="word-break:break-all"> -----td自动换行CSS

转自

参考:

http://hi.baidu.com/play_zb/blog/item/763dd945168a2a2bcefca34f.html

http://lllt.iteye.com/blog/910209

http://xcf007.blog.51cto.com/471707/376271

http://blog.sina.com.cn/s/blog_682fcb010100mu0g.html