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:
Thank you for visiting the Balmoral Golf Club website! In order to view this site, you will need to download the current Flash Player. Thank You!


And the file page looked like this below.

Subscribe to our marketing blog for free resources
Tatum Hindman

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 collaborating with clients to define and execute online marketing goals. She likes to blog about hot topics in web design and digital marketing, as well as share tips for strengthening your online presence.

View more posts by Tatum Hindman

Previous Flash player for video Next Are Flash web site good, bad, valuable, or what?

Receive articles in your inbox