HTML div 显示在 Flash 对象之上

发布于 2024-11-16 08:24:53 字数 1133 浏览 0 评论 0原文

我有一个 Flash 幻灯片，上面有 2 个 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 的 HTML 5 启用脚本来制作 HTML5标记在较低版本的 IE 中工作。有趣的是，第二个 div #intro 正确叠加，但 #top-menu 始终出现在幻灯片后面。

所有 3 个元素均通过显式设置的 z 索引进行绝对定位。无论我将它们设置多高或多低，flash 对象始终位于 #top-menu 元素前面。

我检查了渲染的标签，其中一个将 wmode 列为 transparent。

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

原文

I have a flash slideshow with 2 divs overlaying it, one at the top and one at the bottom.

<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>

Both overlay properly in Firefox/Safari/Chrome, but nothing I try seems to make it work in IE. I'm using Remy Sharp's HTML 5 enabling script to make the HTML5 mark-up work in lower versions of IE.
What's funny is that the second div, #intro overlays correctly, but #top-menu always appears behind the` slideshow.

All 3 elements are absolutely positioned with z-indexes explicitly set. No matter how high or low I set them the flash object is always in front of the #top-menu element.

I have checked the rendered <param> tags and one of them lists wmode as transparent.

The flash object is dynamically inserted with php through a CMS, so I have no access to the <embed> tag that many have suggested adding the transparent attribute to.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

卷耳 2024-11-23 08:24:53

<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.xxxxxxxxxxxxxxx.com/x .php

<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>

Simply experiment with the bottom:15px and the top:15px - and then remove the border and style the box as you wish. the object code above is not recommend as I am just typing a quick solution for you.

A live example for you, notice the top box over the video: http://www.xxxxxxxxxxxxxx.com/x.php

回复收藏 0 原文

~没有更多了~