ボックスの重なり順を設定する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	全バージョン
	Opera	Opera 6以上
	Chrome	全バージョン
	iPhone/iPad	全バージョン

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


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

jQueryを使った参照方法

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

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

CSSリファレンスインデックス

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

TechTargetジャパン

リッチクライアント & 帳票フォーラム新着記事

次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する
「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう
学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない
1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

デザインハック

- PR -

＠IT Sepcial

＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

ニュース一覧へ

お勧め求人情報

転職／派遣情報を探す

エンジニアの求人情報、ただいま増加中
【転職サーチ】SIer／Web企業／新規事業
スマホ開発で、あなたのキャリアを生かす

派遣エンジニアにお役立ちの仕事情報
「派遣・フリーで働くメリット」とは？
活躍する派遣エンジニアの本音

エンジニアのキャリア実現を応援します

ITトレメ「ビジネス基礎」シリーズ開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～ Android編～

ホワイトペーパー（TechTargetジャパン）