DIV悬浮层如何跨页面在iframe框架之上显示

两个页面index.html和online.html
index页面是三列DIV布局，
在中间和右边布局中用的iframe框架来内嵌其他文件，
在右边布局中的iframe中内嵌的online.html，
而在online.html 这个文件中有一段DIV的悬浮层效果，鼠标放在文字上可以显示DIV悬浮层，离开消失的这种效果
怎么才能使online.html中的div悬浮层，在index页面框架之上显示呢，
现在总是被iframe遮住，查了好多都不好使，
希望大佬们在百忙之中赐教！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

只能把DIV的悬浮层移到index.html。
或者用window.createPopup()做悬浮层（只有ie浏览器支持）。除此以外没有别的办法
修改显示逻辑，将你的悬浮层放到index页面上来创建即可，如果在你右侧iframe里创建当然是跑不出iframe那个区域的。思路如下(以下是你右侧Iframe的代码)：
文字放上去的时候，判断下
var w=window.self
if(window.top!=w)//如果顶级窗口不是当前窗口，则取顶级窗口
w=window.top那么这个w就是你要创建的悬浮层的所在的窗口对象
可以获取w.document.body.追加你的那个悬浮层即可
那js的悬浮层代码还用放到index中吗大哥能否加下您的联系方式，帮我看看代码可以吗
那js的悬浮层代码还用放到index中吗大哥能否加下您的联系方式，帮我看看代码可以吗
代码不用加到Index，只是把你创建悬浮层和隐藏的那段代码加上对当前窗口的处理即可，编程要转换思路，代码可以是当前窗口的，但是我可以让代码在外层窗口跑，只要你能获取到窗口对象
那js的悬浮层代码还用放到index中吗大哥能否加下您的联系方式，帮我看看代码可以吗
代码不用加到Index，只是把你创建悬浮层和隐藏的那段代码加上对当前窗口的处理即可，编程要转换思路，代码可以是当前窗口的，但是我可以让代码在外层窗口跑，只要你能获取到窗口对象
按照您的说的
if (this.online.document.getElementById(data)) {
    if (this.online.document.getElementById(data).innerHTML.indexOf("parent.sw") == -1) {
        rstr = this.online.document.getElementById("大家").outerHTML;
        //mdstr = this.online.document.body.innerHTML;
        mdstr = this.online.document.getElementById('mdonline').innerHTML;
        mdstr = mdstr.replace(rstr, rstr + restr);
        this.online.document.getElementById('mdonline').innerHTML = mdstr;
    }
} else {
    if (this.online.document.getElementById('onlineok')) {
        rstr = this.online.document.getElementById("大家").outerHTML;
        //mdstr = this.online.document.body.innerHTML;
        mdstr = this.online.document.getElementById('mdonline').innerHTML;
        mdstr = mdstr.replace(rstr, rstr + restr);
        this.online.document.getElementById('mdonline').innerHTML = mdstr;
    }
}
} catch (e) {
    return false;
}
}
悬浮层代码弄到同页面了，可还是不行，
Index:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        html, body {
            margin: 0;
            height: 100%;
        }        .column {
            width: 200px;
            height: 100%;
            overflow: hidden;
            border: 1px black solid;
            display: inline-block;
        }        iframe {
            width: 100%;
            height: 100%;
            overflow: auto;
            border: 0;
        }        #msg {
            display: none;
            width: 250px;
            height: 100px;
            border: 3px #ff6a00 solid;
            background-color: white;
            font-size: 20pt;
            position: absolute;
        }
    </style>
</head>
<body style="position: relative;">
    <div class="column">
        <iframe src="online.html"></iframe>
    </div>
    <div class="column">
        <iframe src="content.html"></iframe>
    </div>
    <div id="msg"></div>
</body>
</html>
<script src="../../../Script/jquery-1.7.2.min.js"></script>
<script>
    function showtip(obj) {
        $('#msg').html($(obj).html())
            .css({
                top: $(obj).offset().top - $(obj).closest('body').scrollTop() + 'px',
                left: $(obj).offset().left + 'px'
            }).show();
    }
    function hidetip() {
        $('#msg').hide();
    }
</script>online:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .item{
            margin:10px;
            width:150px;
            height:150px;
            background-color:gray;
            border:1px green solid;
        }
    </style>
</head>
<body>
    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item1</div>
    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item2</div>
    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item3</div>
    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item4</div>
    <div class="item" onmouseover="parent.showtip(this);" onmouseout="parent.hidetip();">item5</div>
</body>
</html>
非常感谢！
在请教个问题，JS怎么定位让DIV悬浮层靠右显示呢