Flash and the z-index problem, solved

Clinton Montague — Tue, 24 Mar 2009 21:14:08 +0000

I was always told that Flash would render on top of everything else. That’s it. There’s no way around it. It meant that whenever I had a design using, say, suckerfish menus, I’d have to be careful to ensure that there was enough space below the menu to accommodate for Flash’s nasty little habit. It turns out that the notorious they were wrong. Again. It’s amazing just how many times ‘they’ don’t get it quite right, and that the majority of people still believe them.

Just a quick side note – I’ll be using the excellent sfwobject.js in this tutorial rather than embedding the flash directly in the HTML.

The problem

By default, the Flash plugin will do a weird thing. Instead of being displayed inside the browser, it actually makes a new window on top of the browser which synchronises it’s position with where you’d expect the flash should be. (Well, actually it’s a bit more complicated than that, but I won’t bore you with the nitty-gritty). This means that rather annoyingly, unless you know the fix, flash will always be on top of your other content. Even if you set the z index of the flash to 0 and of your content to a bazillion. Take a look at the example.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flash and the z-index problem. Solved</title>
<script type="text/javascript" src="./swfobject.js"></script>
<style type="text/css">
	#test
	{
		position: absolute;
		top: 300px;
		left: 300px;
		width: 400px;
		background-color: #ccc;
		padding: 10px;
		color: #333;
		font-family: georgia;
		font-size: 2em;
	}
</style>
</head>
<body bgcolor="#ffffff">
<div id="flash">This is some flash content - you'll need the flash plugin to see it</div>
<div id="test">HTML on top of the flash. This page was created for the tutorial <a href="http://slightlymore.co.uk/wisdom/flash-and-the-z-index-problem-solved">Flash and the z-index problem. Solved</a> on <a href="http://slightlymore.co.uk">slightlymore</a>.</div>
<script type="text/javascript">
	var so = new SWFObject("wmode.swf", "wmode.swf", "550", "400", "8","#ffffff");
	so.write("flash");
</script>
</body>
</html>

The solution

The solution is simple. With an extra parameter, you can force the flash to render in a different window mode. The window mode that’s of interest to solve this problem is ~~transparent~~ opaque (see the comment by philip). It means (again, in simple terms) that the flash is this time rendered not only inside the browser window, but as if it were a normal image in the document flow instead of in a separate window on top of the browser window. With swfobject, it’s almost too easy.

1	so.addParam("wmode", "opaque");

Or if you want to continue being old-school, you could use the following line:

1	<param name="wmode" value="opaque" />

Adding everything together will leave you something similar to the code below. Again, I have prepared an example page for you to look at.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flash and the z-index problem. Solved</title>
<script type="text/javascript" src="./swfobject.js"></script>
<style type="text/css">
	#test
	{
		position: absolute;
		top: 300px;
		left: 300px;
		width: 400px;
		background-color: #ccc;
		padding: 10px;
		color: #333;
		font-family: georgia;
		font-size: 2em;
	}
</style>
</head>
<body bgcolor="#ffffff">
<div id="flash">This is some flash content - you'll need the flash plugin to see it</div>
<div id="test">HTML on top of the flash. This page was created for the tutorial <a href="http://slightlymore.co.uk/wisdom/flash-and-the-z-index-problem-solved">Flash and the z-index problem. Solved</a> on <a href="http://slightlymore.co.uk">slightlymore</a>.</div>
<script type="text/javascript">
	var so = new SWFObject("wmode.swf", "wmode.swf", "550", "400", "8","#ffffff");
	// this next line is the important one
	so.addParam("wmode", "opaque");
	so.write("flash");
</script>
</body>
</html>

Grab the files

I have zipped up all the files used in this tutorial for you to download.

Application

I first saw this being implemented on www.mitchelsliwa.com and assumed that the man must have been dabbling with black magic. I’m currently working on a huge project which uses this code so that we can get a lightbox over a flash site. Where else have you seen this being used?

Google, Yahoo and Adobe Flash Crawling Experiment – Flash ‘n’ SEO Indexing

Clinton Montague — Mon, 08 Dec 2008 20:58:11 +0000

Google claims to now understand and index Flash content. Do we believe it? The clever people over at webdesign beach have set up an entire site to test just that. And the cheeky little devils embedded the text in various ways to catch google out.