CSS - z-index

トップ > CSSリファレンス > z-index

概要

属性名 z-index
auto | <order>
初期値auto
適用可能要素ポジショニングされた要素
継承継承しない
メディアvisual
アニメーション可能 (<<order> の場合)

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS24.01.01.04.01.0

説明

要素同士が重なって表示される場合の、重なりの順序を指定します。positionstatic 以外の値が設定されている要素に対して有効です。

説明
auto重なり順序をブラウザが自動的に決定します。
<order>表示順序を数値で指定します。-1 などマイナスの指定も可能です。数が大きなものほど前面に表示されます。

使用例

CSS
.sample {
    position: absolute;
    padding: 2px;
    width: 80px;
    height: 80px;
    border: 1px solid #666666;
}
HTML
<div style="position:relative; height:160px">
  <div class="sample" style="z-index:2; top:40px; left:20px; background:#ff9999">A</div>
  <div class="sample" style="z-index:3; top:60px; left:40px; background:#99ff99">B</div>
  <div class="sample" style="z-index:1; top:20px; left:60px; background:#9999ff">C</div>
</div>
表示
A
B
C

関連項目

position, top, right, bottom, left, z-index

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年11月22日
http://www.tohoho-web.com/css/prop/z-index.htm