div被选择框select遮挡住的解决方法

最新推荐文章于 2024-07-15 21:49:08 发布

J275387942

最新推荐文章于 2024-07-15 21:49:08 发布

阅读量1.3k

点赞数

分类专栏： DIV/CSS 文章标签： div function iframe filter border windows

DIV/CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原因：

　　在IE中,select属于window类型控件，它会“挡住”所有非window类型控件可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，他们被渲染在客户区的绘画表面上而select是使用的标准windows控件，只是作为客户区的子控件放置而已，它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，比如iframe和OBJECT。IE7解决了此类BUG。

解决方案：

　　在DIV中加入如下代码：

实例：可拖动DIV浮动于Select控件上

<html>
<head>
<style type="text/css">
  div{
   font-size:12px;
  }
</style>
<script type="text/javascript">
       function drag(elementToDrag, event){
              var startX = event.clientX, startY = event.clientY;
              var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
              var deltaX = startX - origX, deltaY = startY - origY;
              if(document.addEventListener){
                     document.addEventListener("mousemove", moveHandler, true);
                     document.addEventListener("mouseup", upHandler, true);
              }else if(document.attachEvent){
                     elementToDrag.setCapture();
                     elementToDrag.attachEvent("onmousemove", moveHandler);
                     elementToDrag.attachEvent("onmouseup", upHandler);
                     elementToDrag.attachEvent("onlosecapture", upHandler);
              }
              if(event.stopPropagation){
                event.stopPropagation();
              }else{
                event.cancelBubble = true;
              }
              if(event.preventDefault) event.preventDefault();
              else event.returnValue = false;
              function moveHandler(e){
                     if(!e) e = window.event;
                     elementToDrag.style.left = (e.clientX - deltaX) + "px";
                     elementToDrag.style.top = (e.clientY - deltaY) + "px";
                     if(e.stopPropagation) e.stopPropagation();
                     else e.cancelBubble = true;
              }
              function upHandler(e){
                     if(!e) e = window.event;
                     if(document.removeEventListener){
                            document.removeEventListener("mouseup", upHandler, true);
                            document.removeEventListener("mousemove", moveHandler, true);
                     }
                     else if(document.detachEvent){
                            elementToDrag.detachEvent("onlosecapture", upHandler);
                            elementToDrag.detachEvent("onmouseup", upHandler);
                            elementToDrag.detachEvent("onmousemove", moveHandler);
                            elementToDrag.releaseCapture();
                     }
                     if(e.stopPropagation) e.stopPropagation();
                     else e.cancelBubble = true;
              }
       }
       var show = true;
       function closeDiv(obj){
         if(show){
          document.getElementById("sowftphone").style.display = "none";
          obj.innerHTML = "展开";
          show = false;
         }else{
          document.getElementById("sowftphone").style.display = "block";
          obj.innerHTML = "折叠";
          show = true;
         }
       }
</script>

</head>
<body>
<div id="phonediv" style="position: absolute; left: 100px; top: 100px; width: 900px; z-index: 2; background-color: white; border: solid 1px #aaa; font-weight: bold">
<div
  style="background-color: #eee; border-bottom: solid 1px #aaa; padding: 3px; cursor: move;filter:ALPHA(opacity=0); "
  οnmοusedοwn="drag(this.parentNode, event);">
  标题
  <span id="closeSpan" οnclick="closeDiv(this)" style="position: relative;left: 780px;cursor: pointer;z-index: 100">折叠</span>
</div>
<div style="padding: 5px;height:50px;" id="sowftphone" >
  替换自己的内容
</div>
   <iframe   src="" frameborder="0" style="position:absolute;   visibility:inherit;   top:0px;   left:0px;   width:expression(this.parentNode.offsetWidth);   height:expression(this.parentNode.offsetHeight);   z-index:-1;   filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
</div>
<select>
<option>aaaaa</option>
</select>
<body>
</html>