Menu Behind Slideshow - thanks Benjamin Mauerberger

[Ben Mauerberger]

I am having this problem with my menu falling behind the flash slideshow on one of my sites. Does anyone know how to fix the problem? I have tried several times and it just wont fix it (ie z-index etc). Thanks Benjamin Mauerberger

[Video Man]

First, be sure to use a wmode in your Flash .swf params:

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.

Then you can use a declared position and z-indexing if needed:

One more thing about positioning. z-indexing only works with elements that have a declare position like absolute or relative, and how that element reacts to a declare position will depend on whether or not it's parent element also has a declare position.
So

Code:
#flash {
z-index:5;
}
will not work without ALSO giving it a declare position.
And the actual display of #flash will very depending on whether or not it's parent also has a declared position.
From an old post:

The thing missing from your positioning is that unless the parent element 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.
Example page using declared positions and z-indexing to sandwich Flash between 2 layers of text:
http://www.cidigitalmedia.com/tutorials/flash_div.html
View the source code or copy it and practice by changing z-index and positions.

Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.
z-indexing ONLY works with elements that have a declared position.

Best wishes,
Video Man