【CSS】要素の重なり順序を指定する＜z-index＞

z-indexプロパティを指定した要素は、数字が小さいほど奥へ、大きいほど手前に表示されます。

z-indexプロパティは、divボックスなどのブロックレベル要素で、position要素 (static以外の値、position:absolute, position:relative, or position:fixed)でのみ適用可能です。

z-index: 値;

auto	親要素と同じ階層を設定。(初期値)
数値	要素の重なり順序を整数で指定。0を基準に、値が大きいものほど上になります。
initial	全体的に。
inherit	全体的に。

div要素とpositionプロパティの組み合わせで重なるようにするときに、入力された順に積み上げていきますが、後で入力された要素であるほど上に表示されます。

この順序はz-index属性を利用すると表示順序を調整することができます。

position: absolute;

<!doctype html>
 <head>
 　<title>CSS | z-index</title>
 　　<style> 
　div {
　position: absolute;
  width: 120px;
  height: 120px;
  }
　　.red {
　　background-color: red;
　　top: 20px;
　　left: 20px;
　　z-index: -1;
  }
　　.blue {
　　background-color: blue;
　　top: 50px;
　　left: 40px;
　　z-index: 1;
  }
　　.yellow {
　　background-color: yellow;
　　top: 20px;
　　left: 180px;
　　z-index: 2;
  }
　　.black {
　　background-color: black;
　　top: 50px;
　　left: 200px;
　　z-index: 3;
  }
 　　</style>     
 　</head>
 <body>
 <div class="red-box">red </div>
 <div class="blue-box">blue </div>
 <div class="yellow-box">yellow </div>
 <div class="black-box">black </div>
 </body> 
</html>