Элемент<div> не является верхним слоем в Safari Windows

Я имею <div> элемент для отображения всплывающего сообщения. Я уже поставил z-index:1000 и добавить <iframe> но элемент div по-прежнему не отображается над потоковым видео (встроенный плагин) в браузере Safari. Я использовал Chrome и Firefox, оба из которых работают, но в Safari Windows это не работает.

Это мой код в скрипке.

<BODY style="background:transparent">
<div style="position:relative; z-index:0;">
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180">
        <param name="wmode" value="transparent"></param>
        <embed height="180" width="240" align="left" src="xxxx.avi" autoplay="false" controller="true" wmode="transparent"></embed> 
    </object>

    <object>
        <param name="wmode" value="transparent"></param>
        <param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="240" height="180"></embed>
    </object>
</div>  

<div id="draggable">
    <div class="drag">
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
    </div>
    <iframe class="frame"></iframe>
</div>


Может кто-нибудь найти какие-либо проблемы с этим кодом?

Источник

4 ответа

Вам нужно изменить / установить режим wmode на непрозрачный.

<embed src="..." wmode="opaque"></embed>

И попробуйте установить соответствующий тип для первого объекта.

<embed src="xxxx.avi" ...wmode="opaque" type="application/x-shockwave-flash"></embed>

http://jsfiddle.net/8C2py/7

Источник

Насколько я помню, flash находится поверх всех элементов HTML.

Вы можете попытаться скрыть это, когда всплывающее окно там. К сожалению, я еще не видел обходной путь для этого.

Один хороший метод - это иметь изображение-заполнитель того же размера, что и видео, и переключать его

<div class="video">
    <!-- video here -->
</div>
<div class="placeholder" style="display:none;">
    <img src="path/to/placeholder.jpg"
</div>

когда у вас открылось всплывающее окно

$(".video").css('display','none');
$(".placeholder").css('display','block');
Источник

Вот технические характеристики z-index свойство (источник: w3.org):

Каждый блок принадлежит одному контексту стека. Каждый позиционированный блок в данном контексте стека имеет целочисленный уровень стека, который является его положением на оси z относительно других уровней стека в том же контексте стека.

я думаю что <div class="drag"> находится не в том же контексте стека, что и ваши объекты Flash. Чтобы убедиться в правильности контекста стека, сделайте <div id="draggable"> также относительный, и дать ему более высокий z-индекс, чем <div> который содержит объекты флэш.

Примечание. В настоящее время я не могу протестировать Safari, поэтому дайте мне знать, работает он или нет:

<div style="position:relative; z-index:1;">
    ... your flash objects...
</div>  

<div id="draggable" style="position: relative; z-index: 2;">
    <div class="drag">
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
    </div>
    <iframe class="frame"></iframe>
</div>
Источник

Работает IE FF Chr & Saf

Размещение div над фреймом / видео...

чтобы разместить div над изображением, просто замените iframe с вашим изображением....

Часть трюка для видео... Вы должны добавить...?wmode= прозрачный... в конец URL src...

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:220px; height:140px;">
    <iframe id="frm0" class="Vid" src='http://www.youtube.com/embed/y1VVXrUdO2s?wmode=transparent' frameborder='0'></iframe>
    <div id="div0" draggable="true" class="Lyr" ></div>
</div>

или если вы хотите использовать свой объектный код....

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:260px; height:190px;">
     <object class="Vid" >
        <param name="wmode" value="transparent"></param>
        <param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" 
        allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="240" height="180"></embed>
    </object>
     <div id="div0" draggable="true" class="Lyr" ></div>
</div>

и код avi....

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:260px; height:190px;">
     <object class="Vid" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180" >
        <param name="wmode" value="transparent"></param>
        <embed height="180" width="240" align="left" src="xxxx.avi" allowscriptaccess="always" autoplay="false" controller="true" wmode="transparent"></embed> 
    </object>
     <div id="div0" draggable="true" class="Lyr" ></div>
</div>
Источник
Другие вопросы по тегам