【CSS】適度な不思議感。Flashの手前にオブジェクトを配置する方法

Adobeがモバイル向けFlashの開発中止を発表したこんなご時世にレガシーなテクニックを一つ。個人的にもサイト構築にFlashを使う事は殆んど無くなってきたのですが、依頼が入ったので、備忘に記します。

HTML

<div class="box">

<object type="application/x-shockwave-flash" id="flash" data="/wp-content/uploads/2011/11/slideshow.swf" width="300" height="200">
<param name="movie" value="/wp-content/uploads/2011/11/slideshow.swf" />
<param name="wmode" value="opaque" />
</object>

<p class="text">良い写真を文字で邪魔する</p>

</div>

CSS

.box {
	position:relative;
	z-index:1;
	width:300px;
	height:200px;
}
.text {
	position:absolute;
	z-index:10;
	width:100%;
	height:2em;
	top:50%;
	left:0;
	color:#fff;
	font-weight:bold;
	line-height:2em;
	text-align:center;
	margin-top:-0.5em;
	overflow:-webkit-marquee;
	white-space: nowrap;
}

ポイント

Flashを入れているdivの中に、position:absolute; で z-index:10; なテキストエリアを乗せています。
大切なのは <param name=”wmode” value=”opaque” /> をFlashに記載することです。
Flashはでしゃばりで、がむしゃらに前に出てこようとするので、この条件が整わないと背景化できません。