Элемент ‹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>

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

user430926 22.02.2013 источник

comment

В этом случае вам действительно следует отказаться от встроенных стилей. Это делает вещи намного чище, когда вы помещаете один класс CSS для всех этих <div>. Кроме того, в какой версии Safari вы это тестируете? Кажется, он отлично работает (<div> сверху и все) для меня в Safari 6.0. - Jules 22.02.2013

comment

Я получаю очень странные результаты в Safari 5 (Win XP). Я понимаю проблему, о которой вы говорите, но я также получаю блок QuickTime, который ничего не загружает. Кроме того, вся страница jsFiddle, кажется, странно позиционирует вещи. Я не могу помочь, но просто подумал, что вам будут интересны результаты в другой версии. Удачи дружище :) - Rob Quincey 22.02.2013

comment

Я использовал Safari 5.1.7 в Win 7. Моя цель - сделать перетаскиваемый элемент div поверх всех встроенных объектов. Спасибо. - user430926 23.02.2013

comment

Я обновил код и поставил один CSS. Я попробовал этот код, он отлично работает в Chrome и Firefox, но не в Safari (ОС Wind 7). Любое предложение, в чем проблема? - user430926 25.02.2013

comment

См. здесь stackoverflow.com/questions /5867147/ - Bart 13.03.2013

Ответы (4)

arrow_upward
5
arrow_downward

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

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

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

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

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

lukeocom 25.02.2013

comment

это работает, но только для второго встроенного, как насчет первого? Спасибо. - user430926; 25.02.2013

comment

где бы вы ни установили wmode на прозрачный, установите его на непрозрачный. Я обновил скрипку. - lukeocom; 26.02.2013

comment

Я попробовал скрипку, но она не работает, вы могли видеть мой скриншот при ее запуске. Элемент div все еще позади первого внедренного объекта. - user430926; 26.02.2013

comment

очень странное поведение! установка типа mime для первого объекта, кажется, работает. type=application/x-shockwave-flash, однако вам может понадобиться использовать другой тип, так как у меня нет файла .avi для тестирования здесь. - lukeocom; 27.02.2013

comment

Для первого объекта мне нужно использовать plugin/ActiveX, поэтому я не могу использовать type=application/x-shockwave-flash. На самом деле xxxx.avi просто поддельное имя файла, так что это действительно странно. Любое другое предложение? - user430926; 27.02.2013

comment

попробуйте type=application/x-oleobject и посмотрите, будет ли это иметь значение. В противном случае я не слишком уверен, так как у меня нет опыта встраивания объектов ActiveX. - lukeocom; 27.02.2013

comment

Я попробовал type=application/x-oleobject, но мне сказали, что отсутствует плагин, где я могу его скачать? - user430926; 27.02.2013

comment

Привет Люк, если бы я использовал type=application/x-oleobject, потому что нет плагина, поэтому div находится сверху, но я думаю, что если у вас есть плагин, он все равно будет позади встроенного объекта. Спасибо. - user430926; 01.03.2013

comment

Вы можете попробовать добавить ‹param name=windowlessVideo value=true›, который предлагается в этой теме: stackoverflow.com/questions/1602366/ - lukeocom; 13.03.2013

arrow_upward
1
arrow_downward

Насколько я помню, 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');

Goran 10.03.2013

comment

Но я предпочитаю его над объектом, потому что мой блок сообщения не такой большой, как видео. - user430926; 29.03.2013

arrow_upward
1
arrow_downward

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

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

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

Примечание. В данный момент я не могу протестировать 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>

Justus Romijn 12.03.2013

arrow_upward
0
arrow_downward

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

Размещение div над iframe/видео...

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

хитрость предназначена для видео... вы должны добавить... ?wmode=transparent... в конец 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>

а ави код....

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

Brad Byrne 12.03.2013

comment

Это перетаскиваемый div msg, он отображается под видеообъектом. Я хочу, чтобы это было поверх видео, а не изображения. - user430926; 29.03.2013

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

Ответы (4)

Похожие вопросы