About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • May

    9

    DIV 层被 Flash 对象遮挡的终极解决方法

    • 0 Comments
    • HTML,CSS
    • 发布:古树
    • 引用:0
    • 浏览:

    在大多数情况下,在让 DIV 的层浮动时,普通的 DIV 层是会自动插入到浮动层的下面,如下样例代码可能网页美工都很熟悉:

    <div id="div1" style="width:100px;height:100px;background-color:red;float:left;">这是一个浮动的DIV1层</div>
    <div id="div2" style="width:100%;height:100%;background-color:gray;">这是一个普通的DIV2层,显示在了DIV1下面</div>

    但涉及到 Flash 影片元素作为网页内容时,它与其它的 DIV 层往往会有一些奇葩的问题,导致 DIV 层被 Flash 遮挡。解决方法如下:

    第一步:设置 HTML 包装器中 wmode 属性值为 opaque(关于 wmode 的详细介绍参考《Flash HTML 包装器中 wmode 属性详解》):

    <object id='flashObject' ....>
        <param ....>
        <param name='wmode' value='opaque'>
        <embed ... wmode='opaque'>
        </embed>
    </object>

    第二步:设置被遮挡对象的 z-index 值(z-index 必须结合定位元素使用,否则是无效的,例如 position:absolute;,关于 z-index详细介绍参考《CSS z-index 属性》):

    /*
    浮动的 DIV 层 z-index 比 Flash 文件的的大
    并且需结合定位元素如 position,top,left等相关元素
    */

    #flashContent { 
        width:500px
        height:500px;
        z-index:1;
    }
    #divFloat{
        width:100px;
        height:100px;
        background-color:red;
        float:left;
        position:absolute;
        z-index:9999;
        top:0px;
        left:0px;
    }

    当 Flash 作为网页元素一部份被放在 HTML 显示时情况往往有可能是很复杂的,比如当一个 DIV 代码片段置于 Flash 影片代码之后,仅设置 position 与 z-index 可能会造成 DIV 布局定位不准确的情况,所以上面将可能遇到的几个属性值如 top 与 left 也列举进去了。