div被select遮挡

2024-08-20 17:38
文章标签 div select 遮挡

本文主要是介绍div被select遮挡,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一现象:

在调整页面样式时,经常发现浮动层的div被select遮挡。效果如下:

二.原因

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

三.解决方法:

1. 修改select,不用标准select,而是自己用其他html元素模拟
2. 修改你的div,使用iframe。
3. 在div被显示的时候或者到达select所在位置时隐藏select
4. 在div中或div的同一坐标上,用相同尺寸的iframe先遮挡一下,然后在iframe上显示div的内容。
5.Object对象的优先度较高,可以挡住select框

四.解决方案具体示例:

1.最好的方法:iframe来当作div的底

Div被Select挡住,是一个比较常见的问题。 
      有的朋友通过把div的内容放入iframe或object里来解决。 
      可惜这样会破坏页面的结构,互动性不大好。 
  
      这里采用的方法是: 
  
      虽说div直接盖不住select 
      但是div可以盖iframe,而iframe可以盖select, 
      所以,把一个iframe来当作div的底, 
      这个div就可以盖住select了. 


<html>
< head>
< script>
function  DivSetVisible(state)
{
var DivRef =  document.getElementByIdx('PopupDiv');
var IfrRef =  document.getElementByIdx('DivShim');
if(state)
{
DivRef.style.display =  "block";
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";
}
else
{
DivRef.style.display  = "none";
IfrRef.style.display =  "none";
}
}
< /script>
< /head>
< body>
< form>
< select>
< option>A  Select Box is Born  ....</option>
< /select>
< /form>
< div id="PopupDiv"  style="position:absolute; top:25px; left:50px; padding:4px; display:none;  background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can  cover it up<br/>through the help of an  IFRAME.
< /div>
< iframe id="DivShim" src="javascript:false;"  scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px;  display:none;">
< /iframe>
< br/>
< br/>
< a  href="#" οnclick="DivSetVisible(true)">Click to show  DIV.</a>
< br/>
< br/>
< a href="#"  οnclick="DivSetVisible(false)">Click to hide  DIV.</a>
< /body>
< /html>


2.最直接的方法:隐藏下拉框.

下面提供的是一个比较通用的一组函数:

test.htm

------------

<script>
var HideElementTemp = new  Array();
//点击菜单时,调用此的函数,菜单对象
function  cal_hideElementAll(obj){
             cal_HideElement("IMG",obj);
             cal_HideElement("SELECT",obj);
             cal_HideElement("OBJECT",obj);
             cal_HideElement("IFRAME",obj);
}
function  cal_HideElement(strElementTagName,obj){
try{
         var showDivElement = obj;
        var  calendarDiv = obj;
        var intDivLeft  =  cal_GetOffsetLeft(showDivElement);
         var intDivTop =  cal_GetOffsetTop(showDivElement);//+showDivElement.offsetHeight;
         //HideElementTemp=new Array()
         for(i=0;i<window.document.all.tags(strElementTagName).length; i++){
var  objTemp =  window.document.all.tags(strElementTagName)[i];
if(!objTemp||!objTemp.offsetParent)
          continue;
var intObjLeft=cal_GetOffsetLeft(objTemp);
var  intObjTop=cal_GetOffsetTop(objTemp);
if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&&
         (intObjLeft<intDivLeft+calendarDiv.style.posWidth)&&
         (intObjTop+objTemp.clientHeight>intDivTop)&&
         (intObjTop<intDivTop+calendarDiv.style.posHeight)){
          //var  intTempIndex=HideElementTemp.length;//已经有的长度
       //save elementTagName is  stutas
          //HideElementTemp[intTempIndex]=new  Array(objTemp,objTemp.style.visibility);
          HideElementTemp[HideElementTemp.length]=objTemp
          objTemp.style.visibility="hidden";
             }
         }
}catch(e){alert(e.message)
}
}

function cal_ShowElement(){
        var  i;
         for(i=0;i<HideElementTemp.length; i++){
var objTemp =  HideElementTemp[i]
if(!objTemp||!objTemp.offsetParent)
          continue;
objTemp.style.visibility=''
         }
        HideElementTemp=new  Array();
}
function  cal_GetOffsetLeft(src){
        var  set=0;
        if(src &&  src.name!="divMain"){
             if  (src.offsetParent){
                set+=src.offsetLeft+cal_GetOffsetLeft(src.offsetParent);
}
if(src.tagName.toUpperCase()!="BODY"){
          var  x=parseInt(src.scrollLeft,10);
          if(!isNaN(x))
                 set-=x;
}
         }
        return set;
}

function cal_GetOffsetTop(src){
         var set=0;
        if(src &&  src.name!="divMain"){
             if  (src.offsetParent){
                 set+=src.offsetTop+cal_GetOffsetTop(src.offsetParent);
        }
if(src.tagName.toUpperCase()!="BODY"){
          var  y=parseInt(src.scrollTop,10);
          if(!isNaN(y))
       set-=y;
}
         }
        return set;
}

</script>
< select></select>
< select></select>
< div  style="position:absolute;left:0;top:0;width:100;height:100;background-color:red"  οnclick="cal_hideElementAll(this)">
点击让select隐藏
< /div>
< br><br><br><br><br><br>
< input  type="button" value="点击让select显示" οnclick="cal_ShowElement()">

以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"这样进行隐藏是更直接的.

3.用iframe作载体

以下是一简单的例子:

-----------

<html>
< head>
< meta http-equiv="Content-Type"  content="text/html; charset=gb2312">
< meta name="GENERATOR"  content="Microsoft FrontPage 4.0">
< meta name="ProgId"  content="FrontPage.Editor.Document">
< title>简单菜单</title>
< !--
提供定位函数,用iframe作载体,不会被select挡住
By  Fason(2003-5-21)
-->
<style  id=s>
#div1{
position:absolute;
z-index:100;
width:100;
height:130;
background-color:#d2e8ff;
border:1  solid  black;
}
div{cursor:hand;font-size:12px;}
a{text-decoration:none;color:red;font-size:12px}
< /style>
< /head>
< body>
< script>
function  window.onload(){
var shtml=div1.innerHTML;
var  ifm=document.createElement_x("<iframe frameborder=0 marginheight=0  marginwidth=0 hspace=0 vspace=0  scrolling=no></iframe>")
ifm.style.width=div1.offsetWidth
ifm.style.height=div1.offsetHeight
ifm.name=ifm.uniqueID
div1.innerHTML=""
div1.appendChild(ifm)
window.frames[ifm.name].document.write(s.outerHTML+"<body  leftmargin=0 topmargin=0>"+shtml+"</body>")
}

function  show(){
with(document.all.img1){
x=offsetLeft;
y=offsetTop;
objParent=offsetParent;
while(objParent.tagName.toUpperCase()!=  "BODY"){
x+=objParent.offsetLeft;
y+=objParent.offsetTop;
objParent =  objParent.offsetParent;
}
y+=offsetHeight-1
}
with(document.all.div1.style){
pixelLeft=x
pixelTop=y
visibility=''
}
}
function  hide(){
document.all.div1.style.visibility='hidden'
}
< /script>
< img  id=img1 οnmοuseοver="show()" οnmοuseοut="hide()"  src="ie.gif"><br><select></select>
< div id=div1  οnmοuseοver="style.visibility=''" οnmοuseοut="style.visibility='hidden'"  style="visibility:hidden;">
< div href="http://www.csdn.net"  οnmοuseοver="style.backgroundColor='highlight'"  οnmοuseοut="style.backgroundColor=''"  οnclick="window.open(href)">中国程序员</div>
< div href="http://www.sohu.com"  οnmοuseοver="style.backgroundColor='highlight'"  οnmοuseοut="style.backgroundColor=''"  οnclick="window.open(href)">sohu</div>
< /div>
< /body>
< /html>

第5种方法:Object对象的优先度较高,可以挡住select框

<OBJECT id=aa style="display:none;z-index:1000; position:absolute; top:0;  left:0; width:152; height: 200;" type="text/x-scriptlet"  data="about:<body><div  style='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1  solid  black'>test</div>"></OBJECT>
< select><option>hellohellohellohello</select><button  οnclick=aa.style.display=aa.style.display=="none"?"":"none">test</button>

这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法.

这篇关于div被select遮挡的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1090736

相关文章

Codeforces Round #240 (Div. 2) E分治算法探究1

Codeforces Round #240 (Div. 2) E  http://codeforces.com/contest/415/problem/E 2^n个数,每次操作将其分成2^q份,对于每一份内部的数进行翻转(逆序),每次操作完后输出操作后新序列的逆序对数。 图一:  划分子问题。 图二: 分而治之,=>  合并 。 图三: 回溯:

Codeforces Round #261 (Div. 2)小记

A  XX注意最后输出满足条件,我也不知道为什么写的这么长。 #define X first#define Y secondvector<pair<int , int> > a ;int can(pair<int , int> c){return -1000 <= c.X && c.X <= 1000&& -1000 <= c.Y && c.Y <= 1000 ;}int m

Codeforces Round #113 (Div. 2) B 判断多边形是否在凸包内

题目点击打开链接 凸多边形A, 多边形B, 判断B是否严格在A内。  注意AB有重点 。  将A,B上的点合在一起求凸包,如果凸包上的点是B的某个点,则B肯定不在A内。 或者说B上的某点在凸包的边上则也说明B不严格在A里面。 这个处理有个巧妙的方法,只需在求凸包的时候, <=  改成< 也就是说凸包一条边上的所有点都重复点都记录在凸包里面了。 另外不能去重点。 int

easyui 验证下拉菜单select

validatebox.js中添加以下方法: selectRequired: {validator: function (value) {if (value == "" || value.indexOf('请选择') >= 0 || value.indexOf('全部') >= 0) {return false;}else {return true;}},message: '该下拉框为必选项'}

多路转接之select(fd_set介绍,参数详细介绍),实现非阻塞式网络通信

目录 多路转接之select 引入 介绍 fd_set 函数原型 nfds readfds / writefds / exceptfds readfds  总结  fd_set操作接口  timeout timevalue 结构体 传入值 返回值 代码 注意点 -- 调用函数 select的参数填充  获取新连接 注意点 -- 通信时的调用函数 添加新fd到

C++ I/O多路复用 select / poll / epoll

I/O多路复用:在网络I/O中,用 1个或1组线程 管理 多个连接描述符。             如果有至少一个描述符准备就绪,就处理对应的事件             如果没有,就会被阻塞,让出CPU给其他应用程序运行,直到有准备就绪的描述符 或 超时

CSS实现DIV三角形

本文内容收集来自网络 #triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;} #triangle-down {width: 0;height: 0;bor

Go Select的实现

select语法总结 select对应的每个case如果有已经准备好的case 则进行chan读写操作;若没有则执行defualt语句;若都没有则阻塞当前goroutine,直到某个chan准备好可读或可写,完成对应的case后退出。 Select的内存布局 了解chanel的实现后对select的语法有个疑问,select如何实现多路复用的,为什么没有在第一个channel操作时阻塞 从而导

Go 语言中Select与for结合使用break

func test(){i := 0for {select {case <-time.After(time.Second * time.Duration(2)):i++if i == 5{fmt.Println("break now")break }fmt.Println("inside the select: ")}fmt.Println("inside the for: ")}} 执行后

创建一个大的DIV,里面的包含两个DIV是可以自由移动

创建一个大的DIV,里面的包含两个DIV是可以自由移动 <body>         <div style="position: relative; background:#DDF8CF;line-height: 50px"> <div style="text-align: center; width: 100%;padding-top: 0px;"><h3>定&nbsp;位&nbsp;