ボックスの重なり順を設定するz-indexプロパティ
z-index

 z-indexプロパティは、ボックスの重なり順を設定する際に使われるプロパティです。ボックスの重なり順を整数値で指定し、0が基準で値が大きいものほど上に表示されるようになります。

 positionプロパティの値が「static」以外の場合の要素に適用されます。

基本データ

構文 セレクタ{z-index: 値;}
継承 ×
「auto」「inherit」
数値
効果 ボックスの重なり順を設定
初期値 none
適用個所 すべての要素(一部例外あり)

例:

ほげほげですね。

<p style="position: relative; top : 50px;z-index: 2;">ほげほげですね。</p>
<img src="/fwcr/design/cssref/images/gt.gif" width="376" height="50" style="position: relative; bottom : 10px;z-index: 1;">

動作Webブラウザ

Internet Explorer IE 4以上
Firefox 全バージョン
Safari全バージョン
OperaOpera 6以上
Chrome全バージョン
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.zIndex

jQueryを使った参照方法

$('【セレクタ】').css('z-index','【値】');
$('【セレクタ】').css({'z-index':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間