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.