z-index против <object>: есть ли причина, по которой это не работает в браузере с основными параметрами?(кроме Firefox)

Question

У меня этот код:

HTML

<div class="box_video">
    <object width="330" height="290" type="application/x-shockwave-flash" data="http://www.youtube.com/v/KEkR1ox_K10?version=3&amp;f=user_uploads&amp;app=youtube_gdata&amp;rel=1&amp;border=0&amp;fs=1&amp;autoplay=0" style="visibility: visible;"><param name="allowfullscreen" value="true" /></object>
</div>

<div class="box_fixed">
    My Text
</div>

CSS

.box_video 
{
    z-index: 20;
    height=400;
    background-color: #FF0000;   
    position:relative; 
}

.box_fixed {
    background-color: #2C2C2C;
    bottom: 400px;
    position: fixed;
    width: 100%;
    z-index: 40;
}

Теперь, что я хотел бы отметить, это то, что fixed div должно быть over видео (z-index box_fixed выше box_video)

Но на самом деле (ожидаем Firefox) в IE / Chrome (например) он находится под.

Где я не прав? Есть ли какой-то особый атрибут <object>, о котором нужно заботиться?

Answer 1

Одна из вещей, которая обычно работает, - это установить параметр:

<param name="wmode" value="transparent">

в теге объекта.

например,

<object width="330" height="290" type="application/x-shockwave-flash" data="http://www.youtube.com/v/KEkR1ox_K10?version=3&amp;f=user_uploads&amp;app=youtube_gdata&amp;rel=1&amp;border=0&amp;fs=1&amp;autoplay=0" style="visibility: visible;">
   <param name="allowfullscreen" value="true" />
   <param name="wmode" value="transparent">
</object>

Answer 2

Вы должны установить wmode на transparent.

Answer 3

z-index не будет работать с тегами, которые не позиционируются как absolute, relative или fixed.

Так в вашем css,

object {
    position: relative; // or absolute or fixed
    z-index: 1; // this will work, so you can do any overlay over this object
}