<div> element is not top layer in Safari Windows

always-on-top, html, html-object, safari, z-index

Solution

You need to change/set your wmode to opaque.

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

And try setting the appropriate type for the first object.

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

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

Problem

I have `<div>` element to show pop-up message. I already set `z-index:1000` and add `<iframe>` but the div element still doesn't show above the live streaming video (embed plugin) in Safari browser. I used Chrome and Firefox, both of which work, but it doess't work in Safari Windows. This is my code in a Fiddle. ``` <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> ``` Can anyone find any issues with this code?

Original source

Related problems