HTML-отображение Div поверх Flash Object

Question

У меня есть слайд-шоу со вспышкой, наложенное на него двумя элементами: один сверху и один снизу.

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

Я проверил визуализированные теги <param> и один из них перечисляет wmode как transparent.

Flash-объект динамически вставляется с помощью php через 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 - а затем удалите границу и задайте стиль для поля, как вы хотите.приведенный выше объектный код не рекомендуется, так как я просто набираю быстрое решение для вас.

Просто поэкспериментируйте с нижним: 15px и верхним: 15px - а затем удалите границу и задайте стиль для поля, как вы хотите.приведенный выше объектный код не рекомендуется, поскольку я просто набираю быстрое решение для вас.

В качестве живого примера для вас обратите внимание на верхнюю рамку над видео: http://www.xxxxxxxxxxxxxx.com/x.php