KOMOREBI || blog

でも、探せば、Flashの裏に隠れないようにする方法はあるものです（苦笑）
Veerle's blog | Experimenting with Flash content and z-indexのサンプルと一緒に読むとわかるのだが、CSSにz-indexを用いる意外に、Flashのソース側にも工夫がいる。
いろいろ試してみたが、(X)HTMLの構造的にはFlashの上に乗せたいコンテンツが、Flash部分のソースよりも上にいようが下にいようが構わないみたいだ。

先にまとめると、以下の条件が必要になる。

• "z-index"で、Flash部分に一番下になる番号を割り振る。
• Flashソースで、wmodeパラメーターに"transparent"を用いる

z-index指定は、"position: absolute"を用いていなくても大丈夫そうだった。
とりあえず、Flashよりも上くるコンテンツには、Flash部分よりも大きい数字をz-indexに割り振ろう。

後は、Flashソースにある"wmode"に"transparent"に設定すれば良い。
ちなみに、"transparent"しなければ裏に隠れてしまうので注意。
"wmode"は、FLASHの背景を透明化or不透明化するためのパラメーターで"transparent（透明化）"だ。といっても、このパロメーターは、IEでは対応していないので、違う意味で使い道が出てきた事になる。
ちなみに、最近のFlashのソースだと、Object要素内にEmbed要素を記述すると思うが、両方の wmodeパラメーターに"transparent"を入れておこう。
＃そうしないと、特定のブラウザだけ隠れる、という変な状態に陥る。

たとえるならば以下のようなソースみたいがベスト。
div#a の中に入るコンテンツは、Flashの裏に隠れず上に乗ってくれる。

<div id="a" style="z-index: 3;">
    Flashの上にかぶるコンテンツ
</div>

<div di="b" style="z-index: 1;">
 <object>
   <param name="movie" value="～.swf" />
   <param name="wmode" value="transparent" />
   <embed src="～.swf"  wmode="transparent" />
 </object>
</div>

案件の絡みで、上記をつかったパターンは２つ。

• div#a 内で、ul要素入れ子によるプルダウンでFlashにかぶるパターン
• div#a がdiv#b よりもソース的には下だが、position: absoluteでFlash上に位置させるパターン

ひとまず、いずれもFlashを含むz-indexよりも大きければ大丈夫だった。
確認したのは、

• WinIE7、6、5.5
• Firefox2
• Opera9

おそらくSafariなども大丈夫だろうから、今回は早期にひとまず安堵。

CSSが普及しただけ、どこかで何か予期しないものや、どうにもならない事も見えてくるが、今回のようなのは本当にFlashの設定がたまたま"transparent"だったらz-indexが有効になった・・・のではないか？と、思えてしまうのだが、実際はどうなんだろうか。
今後のブラウザの発展や、環境によって、この問題についても変わってきそうな気もします。