HTML content above transparent Flash
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.