※以前のサイトでアップしていた記事の転載です。

通常Flashの上にHTMLのレイヤーを重ねようとしても、Flashの方が上位に表示されてしまいます。
あまりそういう機会も無いかもしれませんが…。
以下の方法を使う事でFlashの上にHTMLレイヤーを重ねる事ができます。
サンプルでは、水色の背景と流れている文字がFlash、黒文字がHTMLです。

HTMLのソース

<div id="fla_css">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0
width="200" height="100">
<param name="movie" value="swfファイルのアドレス" />
<param name="base" value="." />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="swfファイルのアドレス" base="." wmode="opaque" quality="high"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="200" height="100"></embed>
</object>
<div id="html-layer">
これはHTMLレイヤーです。<br />
これはHTMLレイヤーです。<br />
これはHTMLレイヤーです。<br />
これはHTMLレイヤーです。
</div>
</div>

<param name=”wmode” value=”opaque” />の部分は、通常FlashでHTMLソースを書き出したり、DreamWeaverでFLashを挿入しても自動的には書き込まれません。”opaque”を”transparent”とする事でFlashの背景を透明化するためのプロパティですが、この値を設定し、HTMLレイヤーのDIVのCSSに対して、posision:absolute;を設定する事でFlashを下層レイヤーとして扱う事ができます。
そしてFlashの上に重ねたいHTMLのレイヤーはFlashの記述より後に書いてください。

なお、swfobject.jsなどのライブラリを使用する際も同様にwmodeを設定し、opaqueのパラメータをセットしてください。

<div id='fla_css'>
<script src='JSファイルのアドレス'></script>
<div id='flashcontent'>&nbsp;</div>
<script type='text/javascript'>
var so = new SWFObject('swfファイルのアドレス', 'swfcss', '200', '100', '8', '#004eff');
so.addParam('wmode', 'opaque');
so.write('flashcontent');
</script>
<div id='html-layer'>
これはHTMLレイヤーです。
これはHTMLレイヤーです。
これはHTMLレイヤーです。
これはHTMLレイヤーです。
</div>
</div>

CSSのソース

div#fla_css {
position:relative;
}

div#fla_css div#html-layer {
display:block;
position:absolute;
top:20px;
left:20px;
background:none;
color:#000;
}

まずFLashと上に重ねるHTMLレイヤーを囲むボックスに
position:rerative;
を指定しておきます。
で、重ねたいHTMLレイヤーを
position:absolute;
でFlashと重なる位置に移動させます。

要は、Flashの書き出しにwmode=opaqueを指定する事が重要だという事です。
IE6+,FF,Safari,Opera等、主要ブラウザでは問題なく表示できます。