You have been referred to this item:

"Why can't I move a select element underneath other elements using z-index?"

The z-index specifies in what order elements should be drawn when two or more elements occupy the same area. Setting the z-index is useful whenever you have absolutely or relatively positioned elements that overlap other elements in the document. For more information on absolute or relative positioning, please follow the link at the bottom of this answer. Positive z-index values are positioned above a negative (or lesser value) z-index. Two objects with the same z-index are stacked according to source order. A positive value positions the element above text that has no defined z-index, and a negative value positions it below. So why does setting the z-index attribute of the select element have no effect? Clearly there's something else going on here. And that "something" is that all elements are not created equal.

Now, coming to the topic at hand, let us begin by classifying Web elements into two categories: windowed and windowless.

Windowed elements:

• select elements.
• object elements.
• Microsoft ActiveX controls.
• Plug-ins.
• Dynamic HTML (DHTML) scriptlets.
• iframes in Microsoft Internet Explorer 5.01 and earlier.

Windowless elements:

• Most DHTML elements, such as hyperlinks or tables.
• Windowless ActiveX controls.
• iframes in Internet Explorer 5.5 and later.

All windowed elements paint themselves on top of all windowless elements, since the windowless elements are all drawn on the same window, which has to be on the bottom if the windowed elements are to be seen at all.

However, windowed elements do follow the z-index attribute with respect to each other, just as windowless elements follow the z-index attribute with respect to each other. The reasoning for this is that windowless elements and windowed elements draw on separate MSHTML planes. You can use z-index to manipulate elements on the same plane, but not to mix and match with elements in different planes. You can rearrange the z-indexing of the elements on each plane, but the windowed plane always draws on the top of the windowless plane. This is by design.

Making <select> elements behave

The best solution is usually to hide the windowed elements when you want another element to appear on top of it. You can accomplish this by setting the visibility style to hidden.

Example: selectRef.style.visibility = 'hidden';

Making embedded Flash behave

As is explained at the Properly Embedding Flash link, one should use <object> elements to embed Flash. In order to make the Flash behave as a normal element (windowless), add the following: <param name="wmode" value="opaque" />.