下拉框处于漂浮层上面的问题解决方案

由于<select>的优先级高于<div>  在IE6下容易出现漂浮层被下拉框覆盖的情况,IE8下未出现此类问题。

下面是页面代码:

 1 <div id='img' style='position:absolute;z-index:9999999;' onmouseover='mystop()' onmouseout= 'start()' runat="server">
 2 <table border="0" cellpadding="0" cellspacing="0">
 3   <tr>
 4     <td>&nbsp;</td>
 5     <td align="right"><img src="images/chacha.jpg" onclick="javascript:document.getElementByIdx('img').style.display='none'" style="cursor:hand"/></td>
 6   </tr>
 7   <tr>
 8     <td colspan="2"><asp:Literal ID="ads" runat="server"></asp:Literal></td>
 9   </tr>
10 </table>
11 <iframe src="" frameborder="0" style="filter:chroma(color=#ffffff);position:absolute;visibility:inherit;top:0px;left:0px;expression_r(this.parentNode.offsetWidth);height:expression_r(this.parentNode.offsetHeight);z-index:-1;filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
12 </div>
13 <script language='javascript'>
14 var xPos = 800;var yPos = 0; var step = 1;var delay = 10;var height = 0; var Hoffset = 0;var Woffset = 0; var yon = 0;var xon = 0; var xon = 0; var interval;
15 var img = document.getElementByIdx('img');
16 img.style.top = 0;
17 function changePos(){
18 width = document.body.clientWidth;
19 height = document.body.clientHeight;
20 Hoffset = img.offsetHeight;
21 Woffset = img.offsetWidth;
22 img.style.left = xPos + document.body.scrollLeft;
23 img.style.top = yPos + document.body.scrollTop;
24 if (yon) {
25 yPos = yPos + step;
26 }else {
27 yPos = yPos - step;
28 }
29 if (yPos < 0) {
30 yon = 1;
31 yPos = 0;
32 }
33 if (yPos >= (height - Hoffset)) {
34 yon = 0;
35 yPos = (height - Hoffset);
36 }
37 if (xon) {
38 xPos = xPos + step;
39 }else {
40 xPos = xPos - step;
41 }
42 if (xPos < 0) {
43 xon = 1;
44 xPos = 0;
45 }
46 if (xPos >= (width - Woffset)) {
47 xon = 0;
48 xPos = (width - Woffset);
49 }
50 }
51 function start() {
52 img.visibility = 'visible';
53 interval = setInterval('changePos()', delay);
54 }
55 function mystop(){
56 clearInterval(interval)
57 }
58  start()
59 </script>

上面的代码在IE6下测试过页面上包含的所有下拉框都处在这个漂浮层的下面。

其中的:

<iframe src="" frameborder="0" style="filter:chroma(color=#ffffff);position:absolute;visibility:inherit;top:0px;left:0px;expression_r(this.parentNode.offsetWidth);height:expression_r(this.parentNode.offsetHeight);z-index:-1;filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>

是最关键的。

原文地址:https://www.cnblogs.com/Chaser-Eagle/p/3684684.html