解决Flash object 的z-index 问题

http://joshuaink2006.johnoxton.co.uk/blog/82/flash-content-and-z-index

Flash content and z-index

Wednesday December 1, 2004

Just to set up the scene, a project I am working on requires a Flash navigation set. To tackle the obvious accessibility issues, I have created a run of the mill XHTML list of links that mirrors the Flash version exactly and hidden it from visual browsers using CSS. This is all fine. I have placed the Flash navigation set at the very bottom of the XHTML and positioned it back to the top of the page using CSS, so no major problems there.

The problem really starts when I realise that the Flash content is overlapping two other elements of the page, namely a site wide search form and a logo which doubles as a link back to the home page and, as you would expect, due to it's position within the page structure it is on the top of this 'stack' meaning I can't use the search form and I can't see the logo,let alone click it.

These three elements, for the sake of simplicity, are each contained within a uniquely identified div tag and are positioned absolutely. The obvious answer is to use z-index to move the two divs above the Flash content but (insert Eddie Izzard accent here) it does not work! The reason, as explained by Macromedia

A Flash movie in a layer on a DHTML page containing several layers may display above all the layers, regardless of the stacking order ("z-index") of those layers.

That's all a little bit upsetting I must say. Luckily, the same tech note from Macromedia goes on to explain how you can use the wmode tag to create a transparent background for your Flash content, thus allowing the layers underneath to show through. Support for this method is now pretty widespread for newer browsers (CHECK THIS TECH NOTE FOR BROWSER SUPPORT DETAILS!). I am not overly worried about older browsers because, chances are, I am going to serve up a simplified version for Netscape 4 and his buddies anyway and, as I am using Flash MX specific ActionScript to deliver the content, the user will have to have Player 6 to see the content, so no worries about older versions of the player; such are the decisions you have to make when working with Flash!

Okay, so using Drew's Flash Satay method my code for the Flash content looks something like this

1. <object
   type="application/x-shockwave-flash" data="/flash/navbar.swf"
   width="750" height="90">
2. <param name="movie" value="/flash/navbar.swf" />
3. <param name="wmode" value="transparent">
4. </object>

Line three is the key to the whole thing and adding this, as said, I can now see my logo and my search form, I still can't get to them to use them though!

This is where the tech note got a bit fuzzy for me and the reason I am making this post; it says

Newer browsers add the ability to layer Flash content with DHTML content and in some cases the ability to use transparent backgrounds in the Flash content.

This, to me at least, suggests that I shouldn't have run into the problems I did when using a newer browser, such as Firefox or Internet Explorer 6 (Update: Reading this back maybe the DHTML bit should have been a clue as to why I hit problems, I don't have the D bit!). The z-indexing should have worked straight out of the box but it didn't.

So, as I understand it thus far, I would say that, for the moment at least, you must include the wmode tag if you want the ability to 'layer' the flash content using CSS alone.

With this done and the appropriate CSS in place (e.g. #id{position:absolute; z-index:1;}. My search form, flash navigation and logo are all nestling happily together at the top of the page and I can go and have a nice glass of wine! hooray!

示例：

http://veerle.duoh.com/index.php/blog/comments/experimenting_with_flash_content_and_z_index/