Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

CSSプロパティ

HTMLリファレンス

CSSリファレンス

その他の記事

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

スポンサーリンク

CSSリファレンス

LAYOUT配置TOPCSSPropertiesLayout

  1. display生成するブロック要素の種類
  2. position要素の配置方法
  3. floatフロート(浮動)の指定
  4. clearフロート(浮動)の解除
  5. visibility要素の表示/非表示
  6. top上辺からの距離
  7. right右辺からの距離
  8. bottom下辺からの距離
  9. left左辺からの距離
  10. z-indexスタックレベル(重なり順序)の指定
  11. overflow表示領域をはみ出したテキストの表示方法
  12. clip切り抜き表示(クリッピング)

z-indexスタックレベル(重なり順序)の指定

プロパティの値auto | <integer> | inherit
初期値auto
対象要素positionが指定された要素
継承しない
%無効
メディアvisual
W3C Ref.CSS2.1

プロパティの書式と機能

z-indexプロパティは、positionプロパティでabsolute, fixed, relativeのいずれかが指定されたボックスに対し、スタックレベル(重なりの順序)を指定します。初期状態では全要素がz-index:auto(整数値では"0")であり、特定の要素にz-index:1を指定した場合は最前面に、z-index:-1を指定した場合は最背面に表示されることを意味します。

プロパティの書式機能
z-index: auto要素の記述順に従って描画する
z-index: <integer>スタックレベルを整数値で指定する
z-index: inherit継承

EXAMPLE

STEP-1z-indexを指定しない場合

ブロックはHTMLソースに記述された順番に背面から描画され、後から記述したものは上に重ねられていきます。

Box1
	z-index:auto
Box2
	z-index:auto
Box3
	z-index:auto
Box4
	z-index:auto
Box5
	z-index:auto
STEP-2z-indexを追加

z-indexプロパティで指定した整数値の大きなものほど前面に表示されます。マイナス値を指定した場合、親ブロック(整数値"0"相当)の背景色よりも背面に表示されるので、見えなくなる場合があります。

Box1
	z-index:auto
Box2
	z-index:1
Box3
	z-index:0
Box4
	z-index:2
Box5
	z-index:0
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.