Flash overlap with Z index

[vation]

Hey all,
I have a menu drop down issue that was looking to get some help with. I have a flash drop down menu that overlaps a separate flash piece in an HTML page. The example of what I am talking about can be found here: http://www.cspa.org/cleaning

When you hover over product types, you'll notice that the drop down falls under the 'water banner'. I have set the z-index of that specific banner to be lower than the flash header but it still did not work. When I change the 'water banner' to a static image instead of a flash file, the menu overlaps without a problem.

This is the style that I have applied to the navigation bar
#flash_piece {
z-index: 1;
position:relative;
top:0px;
}

I made another div for the banner and set the z-index to 0. Any help with this would be most appreciated. Thanks!
Vation

[launchpad67]

Try a much higher z-index for your nav bar. Like 1000 mabey.

[rdoyle720]

You have set wmode=transparent for the first Flash movie in the page, but not the second one. So you could either try removing wmode from both, or adding wmode to the second version, then they should layer correctly.

[vation]

Thanks for your replies. I was under the impression that the actual number for the z-index did not matter so long as it was higher than the lower you wanted to overlap. Also, in reference to the transparent setting of the nav bar...i actually need to have the background transparent since the menu drop down needs extend into the bottom portion of the stage.

Believe it or not, I actually reloaded the page this morning and everything worked suddenly. Im still in the process of figuring out how!

[rdoyle720]

Looking at the page, it works because you've set the wmode on both. By default, Flash movies appear on top of everything else (and ignore z-index), so two Flash movies that overlapped, one that is later in the page will appear on top of one earlier in the page.

Setting wmode to "transparent" or "opaque" changes the render settings of Flash so they layer in the page the way other objects do (and z-index will work). Since you had set the window mode for the first Flash movie, it was rendering "in the page", where your second Flash movie was "floating on top", or the default.

[ilovenagpur]

Set the Z-index of flash movie by tutorial at below URL.
Set Z-Index of flash Movie
Regards,
Jitendra Zaa

[Eye for Video]

Looks like the topic has been covered pretty well here, but I'd like to flesh it out a little.
First, you do need to declare a window mode for the Flash
Window Mode (wmode) - What's It For?
There are three window modes.
Window
Opaque
Transparent
By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.
In windowless modes (like opaque), Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.
Second, stacking Flash above or below other page elements is not simply assigning a z-index number. Z-indexing only works with elements which have a declared position (position relative for example). And the results depend on whether or not it's parent element also has a declared position.
Unless the parent element (or containing <div>) also has a declared position, the child will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
So to proprerly place and stack Flash, it requires an understanding of both these key components.
Best wishes,
EfV

[AMGill29]

I have been looking for some current guidance on this issue as I am trying to layer a Flash video under a logo. In reading this post I have used CSS divs, layered properly with the z-index, set position to absolute and wmode=transparent in the Flash video. I was very excited because it worked beautifully in IE, but sadly in Firefox and Safari it does not. What am I doing wrong?

I would appreciate any help - I need to figure this out very soon.

Here is my testing page: http://www.gourmetbutters.com/dev/homeflash.html

[Eye for Video]

Since the problem seems to be in FF which uses the <embed>, the first thing I took a look at was the <embed>

<embed src="http://www.gourmetbutters.com/dev/header_gb.swf" quality="high" bgcolor="#DEDACF" width="1000" height="297"
    type="application/x-shockwave-flash"
    pluginspage="http://www.macromedia.com/go/getflashplayer"> <param NAME="wmode" VALUE="transparent"> </embed>

I dont' think that's the correct way to use <param..
In the <embed> it should go like this:

<embed src="http://www.gourmetbutters.com/dev/header_gb.swf" quality="high" bgcolor="#DEDACF" width="1000" height="297 wmode="transparent" "pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" ></embed>

Try getting that wmode in as above and see if that does it.
Or get rid of the <embed> and use something like this:

<object type="application/x-shockwave-flash" data="filename.swf" width="#" height="#">
<param name="movie" value="filename.swf">
</object>

properly edited for your file of course.
Best wishes,
EfV