CSS辞典 z-indexプロパティの解説

ボックスの重ね順を指定する「z-indexプロパティ」の使用方法を記載

対応バージョン:CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値auto
適用される要素positionプロパティによって配置された要素
モジュールCSS Level 2(Revision 1)
継承なし

概要・使用方法

{ z-index: 重ね順;}

z-indexプロパティ」は、ボックスがpositionプロパティなどで重なった時の順序を指定します。値が大きいものほど前面に表示されます。

指定できる値(重ね順)

autoボックスの重ね順はHTMLソースに記述した順に従います。
数値ボックスの重ね順を数値で指定します。数値が大きくなるほど上に重ねられます。32bitにおける符号付整数(-2147483648~2147483647)を指定できます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>CSS z-indexプロパティサンプルページ</title>
    <meta charset="uft-8">
    <style>
           .nav1{
               position: absolute;
               top: 3em;
               left:3em;
               width:30em;
               height:30em;
               z-index:5;
               background-color:lightsteelblue;
           }
           .contents{
               position: relative;
               top: 1em;
               width:20em;
               height:40em;
               z-index:2;
               background-color:red;
           }
           .footer{
               position: fixed;
               top: 25em;
               width:100%;
               height:10em;
               z-index:10;
               background-color:aqua;
           }
           
    </style>
  </head>
  <body>
      <div class="nav1">
          z-index:3
      </div>
      <div class="contents">
          z-index:2
      </div>
      <div class="footer">
          z-index:10
      </div>
  </body>
</html>

chromeブラウザ実行結果

chrome


Firefox ブラウザ実行結果

Firefox


edgeブラウザ実行結果

edge


operaブラウザ実行結果

opera