如果让flash放置在div的下一层级

关于z-index,有个不得不提到的问题,就是flash和IE 6下的select元素的显示问题。Flash插入网页中,如果和其它元素有重叠,无论我们如何设置z-index,Flash都会浮在其它元素之上。这是为什么呢?

其实与z-index无关,浏览器解析页面时,会先判断元素的类型,如果是窗口类型的,会优先于非窗口类型的元素,显示在页面最顶端。
如果同属非窗口类型的,才会去判断z-index的大小。

Flash嵌入网页中,有个wmode属性,用于指定窗口模式,其值有window(窗口)、opaque(非窗口不透明)、transparent(非窗口透明)三种。其中window表示Flash以窗口形式显示,opaque和transparent表示Flash以非窗口形式显示,如果不显示设置wmode属性,默认wmode的值为window。所以,如果我们没设置wmode值,或者设置wmode为window的话,Flash是以窗口类型显示的,其z轴的优先级是高于所有非窗口类型的元素的,无论我们如何设置z-index也不会有效果。解决的办法就是设置wmode属性为opaque或transparent。因为Flash在IE和Firefox下是用不同的标签嵌入的(IE下以object标签嵌入,Firefox下以embed标签嵌入),所以我们需要对两种标签分别进行设置。

<object type="application/x-shockwave-Flash">
    <param value="opaque" name="wmode"></param>
    <embed wmode="opaque" type="application/x-shockwave-Flash"></embed>
</object>

同样的,select元素在IE6下也是以窗口形式显示的,这是IE6的一个Bug。
解决这个问题,我们可以用一个和div同样大小的iframe放在div下面,select上面,用iframe遮盖住select 。