tsukalogo0000

 

alt

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は奥が深いです。

 

ADD_YOUR_COMMENT

YOURALIAS:
YOUREMAIL:
YOURLINK:
タイトル:
FULLTEXT: