如何使一个DIV层放到Object之上

Question

我有一个自定义的客户端控件,允许在网页上展示似乎这个问题是个老问题了,但一直找不到解决方案如何将一个DIV层放到object之上(注意:这个object不是flash)请教各位了,谢谢!

Answer 1

这样就能保证div在最上层吗，CSDN的层连下拉菜单都覆盖不了。标记学习~

Answer 2

这样就能保证div在最上层吗，CSDN的层连下拉菜单都覆盖不了。标记学习~

Answer 3

极度头大,我的页面就只有三个内容,一个是DIV,一个是客户端控件,还有一个是按钮,点击按钮后,弹出DIV,刷新后台记录,返回记录后刷新object,再关闭DIV,目的就是这样,但就是盖不住,找了N多网页,真没找到一个合适的

Answer 4

z-index:2000 另外可以试试在div中写这个
<iframe style="position:absolute;z-index:9;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);"   frameborder="0"   ></iframe> 

Answer 5

对  用iframe 做
遇到过类似的问题

Answer 6

唉,我也想过用iframe,由于我的object还有一些事件的操作,会影响到界面上的一些Label信息,如果放到iframe里面去,可能会造成极大的麻烦(当然,没尝试,估计麻烦不小)我的想法就只是在同一个页面里面,看看是不是还有别的办法来阻挡BTW: 哪怕更改object都可以

Answer 7

还有一个,用popwindow不过是ie only

Answer 8

回楼上
应当是window.createPopup吧?这个似乎不太好全屏控制,createPopup当创建left=0,top=0的窗口时,都盖到IE上方了,把菜单都遮住了(不是IE里面)

Answer 9

我在考虑一个问题,有没有一个HTML的对象能够包住这个object(除iframe外),然后DIV在这个对象上展示

Answer 10

有个方法，就是，设置弹出div的z-index设置为最大就可以在任何一个元素上了，我之前这样用过，可以的。

Answer 11

style="position:absolute;z-index:9999"最好用iframe

Answer 12

在 <div>里加 iframe即：<div id="…" class="…"><iframe …… 

Answer 13

你这object到底是什么东西啊
讲来听听
看看有什么其它的替代方法

Answer 14

我将z-index都设为10000也不管用我现在使用的就是IE7，同样存在这个问题不是太明白这种结构，请问能否给出示例？

Answer 15

How to put a DIV over a SELECT in IE?
Everybody who tried to implement an HTML menu knows it: in Internet Explorer, there are some elements like SELECT that always appear in front of all other elements no matter what z-index you apply to them. Other elements that present the same problem are ActiveX controls (including Flash movies), OBJECT tags, plug-ins and iFrames. That's because these elements are implemented as windows whereas other elements are just drawn on the existing background window.<rant>This sucks. Really. It's a typical case where an implementation detail forces web developers to go through hoops. This problem is IE only and everything works fine in all other modern browsers.</rant>Now, is it possible to work around it? There is always the possibility of a getElementByTagName and of hiding all such elements from the page when showing an overlaid DIV. Uck. That would really puzzle your users even though it doesn't really impair usability very much in the case of a menu which will go away as soon as you take the mouse cursor out.There is actually a much better workaround, and that's what the new ASP.NET menu is using. I suspect that most other professional menu controls do the same. Let me warn you that it's very hacky and takes advantage of a behaviour that seems as buggy as what we're trying to fix, but it's also very efficient and seamless.The idea is to put an iFrame (which is also a windowed control) on the page at exactly the same location as your DIV. The iFrame must be added at the end of the page so that it appears in front of all other windowed controls (the windowed controls are stacked in the order in which they appear on the page). That takes care of covering any SELECT that may be in our way. Now, you may wonder what good that will achieve as I'll just cover my DIV with an iFrame instead of with a SELECT: that shouldn't buy me anything. Well, for some strange reason, it does. IE seems to be utterly confused by our little trick and just shows the DIV in front of the iframe if and only if you position the DIV after you've positioned the iFrame. It seems to forget about the windowed nature of the iFrame for what it renders after it.If you do it using javascript, just set the position of your DIV after you've set-up the iFrame. If you do it in the HTML up, just define the DIV after the iFrame. Here's HTML up that successfully displays a DIV in front of a SELECT element:<select>
  <option>This usually appears on top in IE</option>
</select>
<iframe src="BLOCKED SCRIPT'&lt;html&gt;&lt;/html&gt;';" scrolling="no" frameborder="0"
  style="position:absolute;width:50px;height:120px;top:0px;left:0px;border:none;display:block;z-index:0"></iframe>
<div style="position:absolute;width:50px;height:120px;top:0px;left:0px;border:solid 1px black;z-index:0">
  This appears in front of the select in IE
</div><select>
  <option>This usually appears on top in IE</option>
</select>
<iframe src="BLOCKED SCRIPT'&lt;html&gt;&lt;/html&gt;';" scrolling="no" frameborder="0"
  style="position:absolute;width:50px;height:120px;top:0px;left:0px;border:none;display:block;z-index:0"></iframe>
<div style="position:absolute;width:50px;height:120px;top:0px;left:0px;border:solid 1px black;z-index:0">
  This appears in front of the select in IE
</div> 
One thing is worth noting: if you work with a secure site (with an https: protocol), you can't use "about:blank" as the url of the iFrame, otherwise you'll get a warning from IE saying that the page uses both secure and insecure contents. Not very nice to your users. So in this case, you'll just need to point the iFrame to some blank but secure page on your site. That's an extra hit to the server but hey, you already have a hit for each image on your site and that doesn't prevent anyone from having dozens of images on each page. Only in this case, it won't get cached client-side. See update below for a workaround...Update: using "BLOCKED SCRIPT;" as the src of the iFrame in the https: case does the trick without the additional hit to the server. Thanks, Scott.Update to the update: "javscript:;" is fine if your div is not transparent, but it will display an error message on the iFrame, so it should be avoided for transparent divs. By the way, if your div is transparent, you need to make the iFrame itself completely transparent (using an Alpha filter). That won't affect the hiding power of the iFrame (selects will actually not show through the div).Update to the update to the update: thanks to David Anson and Kirti Deshpande who pointed me to this neat trick: using "j avascript:'<html></html>';" works well in all cases, even transparency, and avoids the https alert.

Answer 16

用iframe来做吧IFRAME放在DIV下方，把大小设置和DIV的大小一样。这样就能实现你想要的效果了。

Answer 17

试下
.div
{
         float:left;
 z-index:100;
 position:absolute;
 left:80px;
 top:350px;
 margin:0px 0px -100px -60px;
}
用个div浮动定位，事实上可以定位在网页的任意位置上的(我用一张图试过,ff,ie7,8通过~~）。。《——》||不知是不是你要的效果...

Answer 18

用iframe，脚本调用不复杂，parent调用父窗口js方法即可。

Answer 19

不会有极大的麻烦，脚本和事件也很简单。
父窗口如果有个JS方法名叫Notify()，在iframe中要调用这个Notify只需要写成parent.Notify()即可。

Answer 20

<script   type= "text/javascript "   language= "javascript "> 
//more   javascript   from   http://www.smallrain.net 
function   sAlert(str){ 
var   msgw,msgh,bordercolor; 
msgw=400;//提示窗口的宽度 
msgh=100;//提示窗口的高度 
titleheight=25   //提示窗口标题高度 
bordercolor= "#c51100 ";//提示窗口的边框颜色 
titlecolor= "#c51100 ";//提示窗口的标题颜色 var   sWidth,sHeight; 
sWidth=screen.width; 
sHeight=screen.height; var   bgObj=document.createElement( "div "); 
bgObj.setAttribute( 'id ', 'bgDiv '); 
bgObj.style.position= "absolute "; 
bgObj.style.top= "0 "; 
bgObj.style.background= "#cccccc "; 
bgObj.style.filter= "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75 "; 
bgObj.style.opacity= "0.6 "; 
bgObj.style.left= "0 "; 
bgObj.style.width=sWidth   +   "px "; 
bgObj.style.height=sHeight   +   "px "; 
bgObj.style.zIndex   =   "10000 "; 
document.body.appendChild(bgObj); var   msgObj=document.createElement( "div ") 
msgObj.setAttribute( "id ", "msgDiv "); 
msgObj.setAttribute( "align ", "center "); 
msgObj.style.background= "white "; 
msgObj.style.border= "1px   solid   "   +   bordercolor; 
msgObj.style.position   =   "absolute "; 
msgObj.style.left   =   "50% "; 
msgObj.style.top   =   "50% "; 
msgObj.style.font= "12px/1.6em   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif "; 
msgObj.style.marginLeft   =   "-225px "   ; 
msgObj.style.marginTop   =   -75+document.documentElement.scrollTop+ "px "; 
msgObj.style.width   =   msgw   +   "px "; 
msgObj.style.height   =msgh   +   "px "; 
msgObj.style.textAlign   =   "center "; 
msgObj.style.lineHeight   = "25px "; 
msgObj.style.zIndex   =   "10001 ";       var   title=document.createElement( "h4 "); 
      title.setAttribute( "id ", "msgTitle "); 
      title.setAttribute( "align ", "right "); 
      title.style.margin= "0 "; 
      title.style.padding= "3px "; 
      title.style.background=bordercolor; 
      title.style.filter= "progid:DXImageTransform.Microsoft.Alpha(startX=20,   startY=20,   finishX=100,   finishY=100,style=1,opacity=75,finishOpacity=100); "; 
      title.style.opacity= "0.75 "; 
      title.style.border= "1px   solid   "   +   bordercolor; 
      title.style.height= "18px "; 
      title.style.font= "12px   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif "; 
      title.style.color= "white "; 
      title.style.cursor= "pointer "; 
      title.innerHTML= "关闭 "; 
      title.onclick=function(){ 
document.body.removeChild(bgObj); 
document.getElementById( "msgDiv ").removeChild(title); 
document.body.removeChild(msgObj); 
} 
      document.body.appendChild(msgObj); 
      document.getElementById( "msgDiv ").appendChild(title); 
      var   txt=document.createElement( "p "); 
      txt.style.margin= "1em   0 " 
      txt.setAttribute( "id ", "msgTxt "); 
      txt.innerHTML=str; 
      document.getElementById( "msgDiv ").appendChild(txt); 
} 
</script> 
<input   type= "button "   value= "点击这里 "   onclick= "sAlert( 'test弹窗效果 '); "   /> 
================================ 
不过不能拖动 详见： http://topic.csdn.net/u/20070524/09/f0a2e219-f43a-4c13-95d7-1d2a061a70ce.html 
http://topic.csdn.net/u/20070904/09/dccbc280-1a48-4909-a1bc-2f9f86c6f67b.html 

Answer 21

http://www.blueidea.com/tech/web/2003/1474.asp

Answer 22

以前在覆盖<select>的时候就是用div+iframe的