*blog... kind of... *rss 



Layers on top of Flash are possible May 26th 2005, mr.doob
Here I go with a trechy one. That's something that is not very easy to find on Internet, so if anyone needs that in the future here is the explanation.

If you work on the web sector probably you had the problem at some point of flash on the top of the page. I mean, probably you wanted to have another layer (menu navigations for example) on the top of flash but that wasn't working.

After some workarounds on the design I decided to do a bit of research. And this time I found a way to do it.

<div>
  <div id="flash" style="position:absolute; z-index:0;">
     <embed width="400" height="300" type="application/x-shockwave-flash" src="movie.swf" wmode="transparent" />
  </div>
  <div id="layerOnTop" style="position:absolute; display:block; z-index:1;">
    TEXT ON TOP OF FLASH
  </div>
</div>

So as you can see you need to have the layers with position:absolute and then sort the layers with the z-index property.

TADAAAA!!
12 comments

AFAIK, that will make -a lot- of flickering with some cards (or at least, it did on earlier versions of Flash).

Will have to test it with modern versions of browsers/shockwave add-ins.
May 26th 2005, Jcl
That didn't flickered here.. I tested it on:

PC:
IE6
Firefox
Opera

MAC:
Safari
IE
Firefox
May 26th 2005, trace
Yo lo prob
May 27th 2005, humphr3y
Safari ownz ;) Este code creo que solo rula con flashplayer7 btw..
May 27th 2005, trace
safari \o/
May 27th 2005, sole
Si, lo he probado... solo rula con la version 7 del flash... lo del safari, lo discutimos en una party...
May 27th 2005, humphr3y
pq no te gusta? tiene el boton de cerrar solapa donde toca! no a la otra punta de la pantalla! solo por eso ya vale la pena!
May 31st 2005, sole
you'll need to also add wmode="transparent" as a part of the tag otherwise it won't work :)
February 26th 2007, David
The above works well on IE7 but not on FF3.
Any idea what *else* needs to be done.
Thanks
January 22nd 2009, Mulli Bahr
I've updated the snippet, do you mind trying it again?
January 22nd 2009, mr.doob
Thanks a million ! U r the best seriously u have no idea how this helped :))) God Finaly!!!!
January 26th 2010, Iman Gaber
Hei. On my Safari (version 4) it didn't work.
I just had to update the version of my flash player.

It's just click with the right button over some flash animation in any website and press "About Adobe Flash Player 10..." .. u will be redirected for adobe's website and there you can download the player's lastest version (10.0.45.2 I think).

The apple's mistake was not add in Safari's lastest version the flash player updated already. :/
February 24th 2010, Nádia Vasconcelos