Work around for Z-index and Flash movies

Work around for Z-index and Flash movies
Having trouble with layering your elements when a Flash movie is involved?
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 referencethat 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.

Subscribe to our marketing blog for free resources
Tatum

About the author | Tatum Hindman

Tatum is the president of TBH Creative and is responsible for building long-term client relationships. She enjoys the strategy behind web design and sitting down with clients to define online marketing goals. She likes to blog about questions or topics that clients ask about as well as sharing new tricks.

View more posts by Tatum

Receive articles in your inbox