I have run into this CSS issue a couple times and always need to look it up. Recently, I was working on a project for Balmoral Golf Club in Fishers, IN. They have a full Flash site, and it is not the greatest (no worries -- I've told them this also, but they don't have enough budget right now to update the site). Even though they cannot do a full redesign, they need a couple small updates. Unfortunately though, they cannot provide the most recent Flash source files. What to do? My idea was to create a div that would overlap the Flash movie and display a box above the swf player.
I set up my z-indexes as I normally would, but something didn't work. The Flash movie would not go below the box regardless of my position or z-index values...
So, I search around again and found a good reference that reminded me that I needed to add a "wmode" parameter and set it to "transparent". Like this:
My final code was simple and looked like this:
CSS: div#news { position: absolute; top: 60px; right: 15px; z-index: 4; } div#flash { z-index: 1; }
HTML: Box that should appear above flash movie.
Flash movie code.
And the file page looked like this below.
Hope someone finds this info helpful!
0 comments:
Post a Comment