このブログでも紹介し、実装までしている、ウインドウの上辺までスクロールすると上にぴったり固定するJavaScriptですが、これはスクロール位置のイベントを取得して、上辺まで達したらスタイルシートのプロパティ「position」を「fixed」に切り替えるというものですが、この「fixed」を使う際に、オブジェクトの重なり順を注意を払う必要があります。


「static」「relative」「absolute」との関係

「position」プロパティには「fixed」以外に「static」「relative」「absolute」が存在します。ざっくりと説明すると、
static ・・・ 配置について特に何も指定しないデフォルトの状態。特段記述の必要もありません。
relative ・・・ 相対位置の指定。staticが指定されている場合にはそれが基準位置となります。
absolute ・・・ 絶対位置の指定。staticが指定されている場合にはそれが基準位置となります。
fixed ・・・ 位置の固定。
といった感じですが、「static」以外の「relative」「absolute」が指定されている場合には、「fixed」より重なり順が上に位置するので、おかしな表示になってしまう場合があります。
デモページ

ではこのときの対処方法ですが、これは非常に簡単で、「fixed」を指定しているクラスに、以下の一行を追加してください。

z-index:1;


このプロパティは、X軸が横、Y軸が縦だとすると、Z軸は高さ(重なり)になり、Z軸の表示順を指定するものになります。ここで1を指定しておれば、どのポジションとの関係でも表示が一番上にくるという寸法です。

FlashやYouTubeの埋め込みとの関係

z-indexを指定してあっても、どうしても上にかぶさってくるものがあります。それがFlashやYouTubeの埋め込みです。これについても一応の解決方法は存在します。埋め込みオブジェクトの「pram」要素の「wmode」でvalue値を「transparent」にしてすることで前面に出てくるFlashを制御することが出来ます。実装方法は以下の通り
Flashの埋め込みの場合
<!-- object要素内に下記を追加 -->
<param name="wmode" value="transparent" />
<!-- embed要素に下記の属性を追加 -->
wmode="transparent"
YouTubeの埋め込みの場合
<iframe width="560" height="315" src="http://www.youtube.com/embed/oktizKuWbdc" frameborder="0" allowfullscreen></iframe> 動画のパスにパラメータを付与する。

<iframe width="560" height="315" src="http://www.youtube.com/embed/oktizKuWbdc?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
動画をたくさん掲載するサイトなどでは一々設定していくのは非常に面倒ですが、そのためにJQueryを使って自動的にパラメータを付与することも可能なようです。以下のサイトがわかりやすく解説しているので、ご紹介します。
Youtubeでもz-indexが効くようにする「?wmode=transparent」パラメーターをjQueryで自動挿入する

このブログでも、重なり順についておかしいところがかなりあったので、ちゃんと手を入れてみました。最近のトレンドとして、グローバルメニューの位置を固定するUIが目立ってきていますので、もしそういうUIを実装したいと考えているなら、これだけはやっておいたほうがいいと思いますよ。