flashとz-indexの関係全くタイムリーでもないマイタイムリーな話題デス。
通常htmlでは下に書かれた要素程、上部に配置されるのだがz-index はブロックレベル要素の描画レイヤーの上下を設定できるプロパティです。(数字が大きいほど手前になる。) ※レイヤー関係を反映させるには、通常どおりの位置に表示させたい要素も、position: relative; と指定する。無指定(position: static)のままではダメ。 ●z-index指定なし z-index : 1 ; z-index : 2 ; z-index : 3 ; 重なりの順序が反映された表示(図) 特にjoomlaなんかのCMSは、メニューを設定した場合かこれで引っ掛かる場合も多ししかし、flash要素はCSSの指定だけでは下の素材として認識されずツリーメニューなんかが隠れてしまう事が多い。この問題は、Flashが透過モードでない場合、最上位に表示されるため起こる。しかも、macのfirefoxはかしこ過ぎて、CSS通りに描画するがMacのgoogleはじめ、Windowsに関してはIEはもちろん、firefoxに至るまで全滅。 つまりflash要素だけ浮いちゃうのですねそんな場合は、flashのソースに以下を追加して、表示順序を揃える。 ▲上部のメニューをクリックしてもFlashの下に隠れてしまう
<p><div id="swf"> <!-- ここにFlashを(不)透明表示設定で挿入 --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> <param name="movie" value="main.swf" /> <param name="wmode" value="transparent" /> <embed src="main.swf" wmode="transparent" type="application/x-shockwave-flash" /> </object> </div> </p> Flashを挿入するとき、<param>タグや表示用のJavaScriptで、wmode を transparent(または opaque)と設定すること。最初は、単純な記述ミスだと思ってたがいやはや、HTML+CSSは奥が深いです。
|