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 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!
