满屏浮动图标被select覆盖解决方法

来源：互联网发布：ajax获取数据库数据编辑：程序博客网时间：2024/06/13 23:58

如题，遇到了此问题，在网上查找对策，找到的是浮动层被select覆盖的解决方案（比如下拉菜单），离我的需要还有那么点距离。不过原理很类似，就是在浮动层div下衬一个同样大小的iframe，因为ifram优先度高于select，故可以解决。

这里稍微提一下div、iframe、select层级别问题。因为select是窗口元素，并且无可争议div为非窗口元素，所以当这两个排层次关系的话，select永远在div之上，无论div的z-index设置多高，然而iframe比较特殊，在ie5.5之前是窗口元素，ie5.5及之后为非窗口，但是无论他是什么样的原素，他不仅可以通过z-index，跟select进行层级排序，还可以跟div用z-index进行层级排序。这就出现了一个有意思的问题，如果iframe的z-index最大或最小，那么无可争议，不管div的z-index是否大于select，div在select之下；然而一旦div>iframe>selcect这种情况，那么就会出现div在最上，select在最下。

可以网上搜索“ HTML元素的Z-index属性是如何工作的” ，得到更多相关信息。

基于此，因为我的是满屏浮动，所以只要动态获得浮动图标的长宽，相对位置就可以了。

核心代码：

        IfrRef.style.width = DivRef.offsetWidth; // 将图标div层宽度赋给iframe
        IfrRef.style.height = DivRef.offsetHeight; // 将图标div层高度赋给iframe
        IfrRef.style.top = DivRef.style.top; // 相对位置top
        IfrRef.style.left = DivRef.style.left; // 相对位置left
        IfrRef.style.zIndex = DivRef.style.zIndex - 1; // iframe层级别低于div层级别1级
        IfrRef.style.display = "block"; // 显示iframe

关于高度、宽度赋值为什么用offsetWidth和offsetHeight，是因为DivRef.style.width（height）为空，笔者认为这原因是因为div没有width和height属性（只能通过css定义），所以取不到。如果这说法不对，请指正。

完整演示代码如下：（声明，满屏浮动的代码是抄的）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr"><head></head><body><div> <pre> w w w w w w w w w w w w w w w w w w <select style="width:800px"> <option>1111</option> <option>222</option> <option>333</option> </select> w w w w w w w w </pre> <select style="width:800px"> <option>1111</option> <option>222</option> <option>333</option> </select></div><div id="divRef" style="position:absolute; z-index:10" mce_style="position:absolute; z-index:10"> <img src="image/1.jpg" mce_src="image/1.jpg" width="100" height="100"/></div><iframe id="ifrRef" src="javascript:false;" mce_src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;"></iframe><SCRIPT LANGUAGE="JavaScript"> var xPos = 20; var yPos = document.body.clientHeight; var step = 1; var delay = 30; var height = 0; var Hoffset = 0; var Woffset = 0; var yon = 0; var xon = 0; var pause = true; var interval; divRef.style.top = yPos; function changePos() { var DivRef = document.getElementById('divRef'); var IfrRef = document.getElementById('ifrRef'); width = document.body.clientWidth; height = document.body.clientHeight; Hoffset = divRef.offsetHeight; Woffset = divRef.offsetWidth; divRef.style.left = xPos + document.body.scrollLeft; divRef.style.top = yPos + document.body.scrollTop; if (yon) { yPos = yPos + step; } else { yPos = yPos - step; } if (yPos < 0) { yon = 1; yPos = 0; } if (yPos >= (height - Hoffset)) { yon = 0; yPos = (height - Hoffset); } if (xon) { xPos = xPos + step; } else { xPos = xPos - step; } if (xPos < 0) { xon = 1; xPos = 0; } if (xPos >= (width - Woffset)) { xon = 0; xPos = (width - Woffset); } IfrRef.style.width = DivRef.offsetWidth; IfrRef.style.height = DivRef.offsetHeight; IfrRef.style.top = DivRef.style.top; IfrRef.style.left = DivRef.style.left; IfrRef.style.zIndex = DivRef.style.zIndex - 1; IfrRef.style.display = "block"; } function start() { divRef.visibility = "visible"; interval = setInterval('changePos()', delay); } start(); // End --></script></body></html>