HTML content above transparent Flash

Tags: html, flash, transparent, css

Today came upon a problem during a site design I was working on. I had some transparent Flash which worked fine, but I couldn't click the HTML menu bar beneath it. The solution I found was to use z-index to layer the HTML content above the Flash. Once I did this I was able to operate my menu bar fine. Below is a quick excerpt from my CSS styles.

#headFlash {
	position: absolute;
	top: 10px;
	text-align: right;
	width: 100%;
	z-index: 2;
}

#menuBar {
	height: 27px;
	color: white;
	position: absolute;
	top: 200px;
	left: 20px;
	z-index: 3;
}

If you're unsure, z-index allows you to stack content - the z-index value specifying the order. Content with higher z-index values appears above content with lower values.

My code still took a bit of tweaking because remember, z-index only works with positioned content (position: absolute;). Fortunately in this case my menu bar and Flash appear early in my content at predictable locations I can specify. If not, I would anchor the content to a known element using Javascript, buts that's code I'll leave for another blog.

Comments (1)