На разных сайтах в Интернете я часто сталкиваюсь с тем, что на них расположены Flash-объекты, например, видеоплееры с YouTube или фрагменты оформления дизайна на Flash. И при этом различные элементы - плавающие или с абсолютным позиционированием, например, раскрывающиеся меню или всплывающие подсказки, перекрываются областью, занимаемой Flash-объектами.

Причем использование атрибута стиля z-index ситуацию не спасает, и в итоге все смотрится очень некрасиво. А ведь решение проблемы очень простое: достаточно в описании Flash-объекта указать параметр wmode со значением opaque:

<param name="wmode" value="opaque" />

Получится что-то вроде такого:

<div style="position: relative;">
<div style="position: absolute;">Hello, World!</div>
<object type="application/x-shockwave-flash" data="flash.swf">
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="movie" value="flash.swf" />
</object>
</div>

В приведенном примере плавающий элемент div с текстом "Hello, World!", позиционированный относительно общего контейнера, будет расположен поверх Flash-ролика. Этот способ валидный и кроссбраузерный, а расположение Flash-объекта на странице теперь можно регулировать с помощью атрибута z-index.

Атрибут может иметь слудующие значения:

• window — поведение flash-ролика по умолчанию, поверх всего и вся, при этом фон имеет заданный фоновый цвет для ролика.
• opaque — flash-ролик ведёт себя как изображение. Теперь задание z-index влияет на flash-ролик. Фон имеет установленный фоновый цвет для ролика.
• transparent — поведение аналогично opaque, при этом фон прозрачный.

Следует отметить, что при параметре wmode=transparent flash-ролик создаёт дополнительную нагрузку.