備忘録的プログラミングリファレンス

z-indexプロパティ

 z-indexプロパティは、エレメントの前後の表示順を指定するプロパティです。画像処理におけるレイヤーに似た機能です。 z-indexプロパティの値が大きい方が前に表示されます。
 positionプロパティの設定値がabsolute, relative, fixed, stickyである必要があります。

 ブラウザがsafariでは機能しないかもしれません。

例:z-indexプロパティに100を指定
z-index: 100;

構文(Syntax)

CSS

z-index: auto | number | initial | inherit;

DOM(JavaScript)

値の取得
String=object.style.zIndex
値の設定
object.style.zIndex="auto | number | initial | inherit"

設定値(Values)

Value摘要
autodefault値(初期値)で、親エレメントの前後の表示順を継承
number前後の表示順を番号で設定。番号が大きい方が前に表示される。マイナスも使える
initial初期値に戻す
inherit親エレメントのプロパティを継承

Remarks(備考)

Default valueauto
Inherited(継承)No
CSS AnimationYes

ブラウザがsafari

 ブラウザがサファリではz-indexプロパティが効かない場合があります。その場合は、固定されないエレメントに以下のtransformプロパティを加えた方がよいでしょう。

_::-webkit-full-page-media, _:future, :root .css_selector {
    transform:translate3d(0,0,0);
}

Example