z-index

positionプロパティの指定により、要素が重なりあって表示されるとき、その表示順を指定します。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ z-index : 値; }

▲PageTop

指定できる値

値 初期値 意味
auto ○ 要素の記述順(後に出現するものが上位)に表示されます。
数字 数字の大きいものが上位に表示されます。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        z-index : 3;
        background-color : red;
        height : 60px;
      }
      #sample2 {
        z-index : 2;
        background-color : yellow;
        height : 80px;
        left : 150px;
      }
      #sample3 {
        z-index : 1;
        background-color : aqua;
        height : 100px;
        left : 300px;
      }
      #sample {
        height : 150px;
      }
      #sample div{
        position : absolute;
        width : 200px;
        text-align : right;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      <div id="sample1">【z-index : 3】</div>
      <br>
      <div id="sample2">【z-index : 2】</div>
      <br>
      <div id="sample3">【z-index : 1】</div>
    </div>
  </body>
</html>

表示結果

【z-index : 3】

【z-index : 2】

【z-index : 1】

▲PageTop

関連項目

CSS

position

▲PageTop

▲