ロールオーバ時画像を別画像に重ねるには？

質問

このスカパーのサイト上部のタブのように、
ロールオーバー時に下のコンテンツに画像が重なるようにしたいのですが、これはどうやっているのでしょうか？

スカパー
http://www.skyperfectv.co.jp/

このサイトのソースを見たり、ロールオーバーについて書かれている参考サイトを調べたのですがわかりませんでした。

ボタンと下のコンテンツをそれぞれpotision指定で固定すれば良いのかと思ったのですが、うまくいかずかれこれ１時間くらい悩んでいます。

わかる方いらっしゃいましたらお願いします。

回答No.2

abril

> ロールオーバー時に下のコンテンツに画像が重なるようにしたいのですが、これはどうやっているのでしょうか？
> http://www.skyperfectv.co.jp/
> ボタンと下のコンテンツをそれぞれpotision指定で固定すれば良いのかと思ったのですが、うまくいかず

このサイトに関して言えば、左端にサイトのロゴが置かれている白いバーは単なる「背景」画像ですので、それ自体と上のナビボタンは領域が重なっているわけではないですね。

(a)ロールオーバー時に下部に▼がでるナビボタン
(b)左のブルーのロゴ
(c)右の白いロゴ
(d)「English」などのナビボタン

これらは親要素である<div id="HeadArea">～</div>に"position: relative;"と白いバー画像を背景に設定した上で、一部は"position: absolute;"で位置指定をしていますが、実際の表示領域は重なり合っていません。なのでz-index（重ね合わせ）の指定は本件の場合は使われていないですね。

ヘッダー部分はJavaScriptで外部ファイルで書き出されていますので、まずそちらを見て実際のマークアップを把握した上で、CSSでの定義も覗いてみて下さい。上記の様に構成されているのがすぐわかりますので。ちなみに、(a)もHTML側ではテキストを挿入してありますがそれを"text-indent: -9999px;"で表示領域から追い出した上で画像部分を全て背景画像（off/on画像が上下に一枚に繋がったもの）として表示し、マウスオーバーの際には下部のon画像の部分が表示される様に"a:hover"で垂直方向の位置をマイナス値にしてずらしています。

ソースを解析するのが理解と応用への一番の近道です。

回答No.1

noname#66720

z-indexとか使われましたか？