View Full Version : z-index and flash

12-23-2011, 04:01 AM
Hi all..

I have a modal window I'm working on, but the flash below it comes over the top of the modal window. I'm assuming it's a z-index issue. I'm using Tinybox2 for the modal window, and it's CSS styles use 800 and 900 for z-index.

.tbox {position:absolute; display:none; padding:14px 17px; z-index:900}
.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}
.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}
.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(images/close.png) no-repeat}
.tclose:hover {background-position:0 -30px}

The flash itself isn't in a div but in a table. Is there a way to give it a lower z-index?

Thanks in advance!


12-23-2011, 04:06 AM
z-index doesn't work on flash (since by default flash appears above any other element on the page)...you need to set the "wmode" attribute of the flash element to "opaque" or "transparent" to get the flash below other element(s) on the page.

See: http://kb2.adobe.com/cps/127/tn_12701.html

12-23-2011, 04:35 AM
omg! i love you!!!! lol....I've been searching on that for HOURS!
thank you!