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.
<div id="news">
<h2>
Elevate your golf game at the Balmoral Golf Club</h2>
<p>
<b>Join us for a 2009 Membership Open House</b></p>
</div>
<br/>
<p>
Saturday, October 11, 2008<br/>
10 a.m. until 3 p.m.<br/>
Tour the club via golf cart</p>
<p>
Special membership incentives and the remainder of the 2008 golf season. egister for drawing for Bob Hope Chrysler Classic golf bag.</p>
<p class="contact">
For more information contact 317-557-5765.</p>
</div>
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.
