FLASH遮挡DIV浮动层解决方案兼容IE FF Chrome

这里是关于“FLASH遮挡DIV浮动层解决方案兼容IE FF Chrome”的完整攻略，以下为详细讲解：

这里是关于“FLASH遮挡DIV浮动层解决方案兼容IE FF Chrome”的完整攻略，以下为详细讲解：

背景

在网页开发中，经常会出现FLASH对象遮挡了DIV浮动层的情况。这是由于FLASH对象往往会在网页上方层级最高，这会导致在页面浮动的层级中，FLASH对象会遮挡在前面，从而影响网页视觉效果。

在这种情况下，我们需要找到一种解决方案，使得DIV浮动层可以正常显示，同时FLASH对象也可以正常展示。

解决方案

一般来说，我们可以使用Wmode参数来解决这个问题。Wmode参数允许用户设置Flash对象优先级和背景透明度，从而达到解决这个问题的目的。

在设置Wmode参数时，我们可以为flash对象指定背景透明度。通过设置背景透明度，Flash对象可以成为页面的一部分，同时DIV层可以被正常显示出来。同时，我们也可以设置优先级，将Flash对象的优先级降低，使它处于浮动层的下方，这也可以有效地解决这个问题。

以下是两个使用Wmode参数解决这个问题的示例：

示例一

<div style="width:300px;height:300px;background-color:#f2f2f2;position:relative;z-index:1;">
  <div style="width:200px;height:200px;background-color:#ccc;position:relative;z-index:2;float:left;">这是一个DIV浮动层</div>
  <object width="300" height="300" wmode="transparent" data="test.swf"></object>
</div>

在这个示例中，我们首先使用了两个DIV层，分别用于设置网页背景和浮动层。我们还在页面上设置了一个FLASH对象，通过设置wmode参数为transparent，使其可以透明化，同时允许DIV浮动层在Flash下面展示。

示例二

<div style="position:relative;width:500px;height:500px;">
  <div style="position:absolute;left:50px;top:50px;width:100px;height:100px;background-color:#ccc;z-index:1;">这是一个DIV浮动层</div>
  <object width="300" height="300" wmode="opaque" data="test.swf"></object>
</div>

在这个示例中，我们使用了一个嵌套结构的DIV层，其中设置了一个绝对定位的DIV浮动层和一个FLASH对象。通过设置wmode参数为opaque，我们可以将FLASH对象的优先级降低，使得它处于浮动层的下方。这样，DIV浮动层就可以正常展示了。

总结

以上就是关于“FLASH遮挡DIV浮动层解决方案兼容IE FF Chrome”的完整攻略。通过设置wmode参数和优先级，我们可以很容易地解决这个问题。如果你想要更好地支持不同的浏览器，你可以在页面上使用JavaScript代码来进行检测和优化，从而实现更好的浮动层效果。