彈出層與embed及svg生成的圖形遮蓋問題
對於這方面的問題的幾個解決方法，希望可以對朋友和自己有幫助！
1.flash把層遮擋住了，如何處理呢？
==================================================================
在flash裡面加兩個引數：
< param name=" wmode" value=" transparent" >
< param name=" wmode" value=" opaque" >
說明：
< param name=" wmode" value=" transparent" > flash將透明
< param name=" wmode" value=" opaque" > flash仍將保持不透明
flash的例子：
< object classid=" clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6 0 29 0 " width=" 760" height=" 80" >
< param name=" movie" value=" http://ad.1m1m.com/adfiles/200774817589544.swf " >
< param name=" quality" value=" high" >
< embed src=" http://ad.1m1m.com/adfiles/200774817589544.swf " quality=" high" pluginspage=" http://www.macromedia.com/go/getflashplayer " type=" application/x-shockwave-flash" width=" 760" height=" 80" > < /embed>
< param name=" wmode" value=" transparent" >
< param name=" wmode" value=" opaque" >
< /object>
2.如果是彈出的層< div> < /div> 被< select> 下拉列表所阻擋，有2個方法可以解決！
==================================================================
方法一：
< iframe> 可以遮擋住< select> 。所以要使層能夠遮擋住下面的列表，只要在層中加入一個和層相同大小的< iframe> 就可以了。
具體做法如下：
< div>
< !--//原來的內容//-->
< iframe width=" 100" height=" 100" style=" position:absolute top:0px z-index:-1 border-style:none " > < /iframe>
< /div>
這個方法對於透明的或外形不規則的層無效。原因很簡單，< iframe> 是方的，最大的應用我想就是選單了。用這種方法，再也不會出現選單被列表破壞的尷尬了。
方法二：
< script language=" javascript" >
var ie55up = isie55up()
var overiframe = null
function divover(objid)
{
var obj = document.all[objid]
// 只有ie5.5以上iframe的z-index才有效
if (ie55up)
{
if (overiframe == null)
{
overiframe = document.createelement(" < iframe src=' about:blank' style=' position:absolute left:0 top:0 z-index:998 display:none' scrolling=' no' frameborder=' 0' > < /iframe> " )
}
document.body.insertadjacentelement(" beforeend" overiframe)
with(overiframe.style)
{
top = obj.style.top
left = obj.style.left
width = obj.offsetwidth
height = obj.offsetheight
display = ' block'
}
obj.style.zindex = " 999"
}
else // 隱藏被id為objid的物件（層）遮擋的所有select
{
var sels = document.getelementsbytagname(' select' )
for (var i = 0 i < sels.length i++)
if (obj1overobj2(document.all[objid] sels[i]))
sels[i].style.visibility = ' hidden'
}
}
//判斷obj1是否遮擋了obj2
function obj1overobj2(obj1 obj2)
{
var pos1 = getposition(obj1)
var pos2 = getposition(obj2)
var result = true
var obj1left = pos1.left - window.document.body.scrollleft
var obj1top = pos1.top - window.document.body.scrolltop
var obj1right = obj1left + obj1.offsetwidth
var obj1bottom = obj1top + obj1.offsetheight
var obj2left = pos2.left - window.document.body.scrollleft
var obj2top = pos2.top - window.document.body.scrolltop
var obj2right = obj2left + obj2.offsetwidth
var obj2bottom = obj2top + obj2.offsetheight
if (obj1right < = obj2left || obj1bottom < = obj2top ||
obj1left > = obj2right || obj1top > = obj2bottom)
result = false
return result
}
// 獲取物件的座標
function getposition(obj)
{
for (var sumtop=0 sumleft=0 obj!=window.document.body sumtop+=obj.offsettop sumleft+=obj.offsetleft obj=obj.offsetparent)
return {left:sumleft top:sumtop}
}
// 是否ie5.5以上版本
function isie55up () {
var agt = navigator.useragent.tolowercase()
var isie = (agt.indexof(" msie" )!=-1)
if (isie)
{
var stiever = agt.substring(agt.indexof(" msie " ) + 5)
var veriefull = parsefloat(stiever)
return veriefull > = 5.5
}
return false
}
< /script>
< script>
window.onload = function(){divover(" div1" )}
< /script>
< div style=" position: absolute left:10px top:20px width:200px height:85px border:1px solid red " id=" div1" >
看看現在這個層下面的select不是簡單的隱藏了：）
< /div>
< select name=" " >
< option> test1< /option>
< option> test2< /option>
< option> test3< /option>
< /select>
< p />
< select name=" " >
< option> test1test1test1test1test1test1test1test1test1test1test1test1test1test1< /option>
< option> test2< /option>
< option> test3< /option>
< /select>
< p />
< select name=" " >
< option> test1< /option>
< option> test2< /option>
< option> test3< /option>
< /select>
< p />
http://www.cnblogs.com/joejoe/archive/2008/10/06/829111.html 這個哥們寫的不錯
用了< param name=" wmode" value=" transparent" >
< param name=" wmode" value=" opaque" > 這兩個屬性迎刃而解
為什麼會被遮住呢？查了一下
由於embed標籤的顯示層高於div等其他頁面元素 因此會被其遮蓋.
一般通過隱藏embed標籤的方法來防止遮蓋.
昨天在做一個調研時發現 可以直接 設定 embed 標籤的 wmode=’ transparent’ 屬性 這樣就可以使彈出層遮蓋住
flash了.(該屬性一般的作用是使flash透明 即可以使flash下面的背景透出來 前提是flash自身是透明的)
這個問題解決的方法還要在css裡設定一個背景 這樣彈出層的時候flash透明 背景出現那張圖片 ok了~ 不過就不會動了==
========================================
fusioncharts元件生成的flash遮擋div的解決辦法
在使用fusionchart的時候，生成的flash上會產生層遮擋問題
解決的辦法是修改fusionchart.js檔案
//set background color
if(c) { this.addparam(' bgcolor' c) }
//set quality
this.addparam(' quality' ' high' )
this.addparam(' wmode' ' transparent' ) //這個是需要新增的
//add scripting access parameter
this.addparam(' allowscriptaccess' ' always' )
同時在生成圖形的物件中新增
chart.addParam("wmode","Opaque");
引用 <param name="WMODE" value="transparent"><param name="wmode" value="Opaque">
<param name="wmode" value="Window">
NOTE: 支援其它瀏覽器(firefox opera etc.) 則使用 <embed wmode="transparent" />在embed節點中加入wmode值.
window 模式
預設情況下的顯示模式，在這種模式下flash player有自己的視窗控制代碼，這就意味著flash影片是存在於Windows中的一個顯示例項，並且是在瀏覽器核心顯示視窗之上的，所以flash只 是貌似顯示在瀏覽器中，但這也是flash最快最有效率的渲染模式。由於他是獨立於瀏覽器的HTML渲染表面，這就導致預設顯示方式下flash總是會遮 住位置與他重合的所有DHTML層。
但是大多數蘋果電腦瀏覽器會允許DHTML層顯示在flash之上，但當flash影片播放時會出現比較詭異的現象，比如DHTML層像被flash刮掉一塊一樣顯示異常。
Opaque 模式
這是一種無視窗模式，在這種情況下flash player沒有自己的視窗控制代碼，這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪製的時間和位置。這時flash影片就不會在高於瀏覽器HTML渲染表面而是與其他元素一樣在同一個頁面上,因此你就可 以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋。
Transparent 模式
透明模式，在這種模式下flash player會將stage的背景色alpha值將為0並且只會繪製stage上真實可見的物件，同樣你也可以使用z-index來控制flash影片的 深度值，但是與Opaque模式不同的是這樣做會降低flash影片的回放效果，而且在9.0.115之前的flash player版本設定wmode=”opaque”或”transparent”會導致全屏模式失效。
瞭解了各種模式的實現方式和意義在以後的開發中就可以按照具體情況選擇設定wmode屬性的值了。