<div> 元素不是 Safari Windows 中的顶层答案

【问题标题】：<div> element is not top layer in Safari Windows<div> 元素不是 Safari Windows 中的顶层
【发布时间】：2013-02-08 01:54:36
【问题描述】：

我有 <div> 元素来显示弹出消息。我已经设置了z-index:1000 并添加了<iframe>，但是 div 元素仍然没有显示在 Safari 浏览器中的实时流视频（嵌入插件）上方。我使用了 Chrome 和 Firefox，两者都可以，但在 Safari Windows 中无法使用。

This 是我在小提琴中的代码。

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

谁能发现这段代码有任何问题？

【问题讨论】：

在这种情况下你真的应该远离内联样式。当您为所有 <div>s 放置一个 CSS 类时，它会让事情变得更加简洁。另外，您在哪个版本的 Safari 中进行测试？它在 Safari 6.0 中对我来说似乎很完美（<div> 在上面，等等）。
我在 Safari 5 (Win XP) 中得到了一些非常奇特的结果。我得到了你正在谈论的问题，但我也得到了一个没有加载的 QuickTime 块。此外，整个 jsFiddle 页面似乎都怪异地定位东西。我忍不住只是想你会对不同版本的结果感兴趣。祝你好运队友:)
我在 win 7 中使用了 safari 5.1.7。我的意思是在所有嵌入对象之上制作可拖动的 div 元素。谢谢。
我已经更新了代码并放了一个 CSS。我试过这些代码在 Chrome 和 Firefox 中运行良好，但在 Safari（OS Wind 7）中运行良好。有什么建议吗？
见这里stackoverflow.com/questions/5867147/…

标签： html safari z-index always-on-top html-object

【解决方案1】：

您需要将 wmode 更改/设置为不透明。

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

并尝试为第一个对象设置适当的类型。

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

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

【讨论】：

它有效，但仅适用于第二个嵌入式，第一个呢？谢谢。
在哪里将 wmode 设置为透明，将其设置为不透明。我已经更新了小提琴。
我尝试了小提琴但它不起作用，你可以在运行它时看到我的屏幕截图。 div 元素仍在第一个嵌入对象的后面。
真的很奇怪的行为！为第一个对象设置 mime 类型似乎可行。 type="application/x-shockwave-flash" 但是您可能需要使用不同的类型，因为我在这里没有要测试的 .avi 文件。
对于第一个对象，我需要使用插件/ActiveX，所以我不能使用 type="application/x-shockwave-flash"。实际上 xxxx.avi 只是一个假文件名，所以它真的很奇怪。还有其他建议吗？

【解决方案2】：

据我所知，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');

【讨论】：

但我更喜欢它在对象之上，因为我的消息 div 没有视频那么大。

【解决方案3】：

这是z-index 属性的规格（src：w3.org）：

每个盒子都属于一个堆叠上下文。每个定位的盒子在一个给定的堆栈上下文有一个整数堆栈级别，这是它的 z 轴上相对于同一堆栈中的其他堆栈级别的位置堆叠上下文。

我认为<div class="drag"> 与您的 Flash 对象不在同一个堆叠上下文中。要确保堆叠上下文正确，请使 <div id="draggable"> 也相对，并给它比 @ 更高的 z-index 987654325@ 包含 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>

【讨论】：

【解决方案4】：

适用于 IE FF Chr & Saf

在 iframe/视频上放置一个 div...

要将 div 放在图像上，只需将 iframe 替换为您的图像 ....

trick 部分用于视频...您必须将 ... ?wmode=transparent ... 添加到 src url 的末尾...

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

【讨论】：

这是一个可拖动的 div 消息，它显示在视频对象下方。我希望它在视频 obj 而不是图像之上。