上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
「z-index」は、「position」の補助的役割をするスタイルです。
 「position」についてはこちらから。
positionを使いこなす

 具体的には、ボックスの重なり順を指定するスタイルです。


z-index


z-index:○○;  (数値)重なり順


「position」を指定した要素と同じ部分に記述します。
 複数のボックスが重なるとき、数値が大きいものが「前面」に表示されるようになります。

 実際は以下のように表示されます。

親ボックス
ポジションテスト z-index:2;

ポジションテスト z-index:1;

ポジションテスト z-index:3;





 このような形で表示されます。

 「-」(マイナス)の値を指定することも出来ます。



実際に表示確認してみる(編集可)
【HTML】

【CSS】




 ブラウザによって表示が変わる可能性があるので、マイナスの値を入れて、要素を見えなくしたいときは注意が必要です。
 やるのであれば、前面ボックスをきちんと決めておいて、その裏に見えなくしたいボックスを隠すと言う手法が個人的には良いと思います。

 前面ボックスを「z-index:1;」で指定しておいて、見えなくする子ボックスを「z-index:0;」にし、前面ボックスに重ねて表示すれば、子ボックスは隠れて見えなくなります。

 ただ、あまりこの手法を使っているサイトを見かけないので、あまり使わない方が良いのかも。要素を見えなくする行為は、スパムサイトを疑われる可能性が高いものですから…。


■メニューに戻るにはこちらから。
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Fri.08.06.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。