Question

我有一个闪光幻灯片，上面有两个div，一个在顶部，一个在底部。

<header>
<div id="top-menu">
 <ul>
  <li>Main Menu Link</li>
  <li>Main Menu Link</li>
  <li>Main Menu Link</li>
 </ul>
</div>
<header>
<div id="content">
 <div id="slideshow_wrapper">
  <section id="intro">
   <p>Introduction Text</p>
  </section>
  <section id="slideshow">
   <!--dynamically inserted flash object-->
  </section>
 </div>
</div>

两者都在Firefox / Safari / Chrome中正确叠加，但我尝试的任何内容似乎都无法在IE中运行。我正在使用Remy Sharp's HTML 5 enabling script在较低版本的IE中使HTML5标记工作。有趣的是第二个div #intro覆盖正确，但#top-menu总是出现在幻灯片后面。

所有3个元素都是绝对定位的，并且z-index明确设置。无论我设置多高或多低，flash对象始终位于#top-menu元素的前面。

我已检查呈现的<param>标记，其中一个标记为wmode transparent。

Flash对象是通过CMS动态插入的，因此我无权访问许多人建议添加<embed>属性的transparent标记。

Answer 1

<div class="wrapper" style="position:relative;width:50px;height:200px">
    <div class="swf">
        <object type="application/x-shockwave-flash" data="http://www.xxxxxxxxxxxxxx.com/catwalk/flvplayer_novolume_crop_runway7.swf?autoStart=false&file=../catwalk/movies/379_6.flv&repeat=true" width="50" height="200" wmode="transparent">
        <param name="movie" value="http://www.xxxxxxxxxxxxxx.com/catwalk/flvplayer_novolume_crop_runway7.swf?autoStart=false&file=../catwalk/movies/379_6.flv&repeat=true" />
        <param name="wmode" value="transparent" />
        </object>
    </div>
    <div class="bottom" style="position:absolute;border:1px solid #333;background:#fff;width:50px;height:25px;bottom:15px">bottom</div>
    <div class="top" style="position:absolute;border:1px solid #333;background:#fff;width:50px;height:25px;top:47px">top</div>
</div>

只需尝试底部：15px和顶部：15px - 然后移除边框并根据需要设置框的样式。我不建议使用上面的目标代码，因为我只是为您输入快速解决方案。

为您提供实时示例，请注意视频的顶部框：http://www.xxxxxxxxxxxxxx.com/x.php

HTML div显示在Flash对象之上

1 个答案: