レイヤー


z-index

 z-index属性を使用すると領域の上下関係を変更できます。通常、先に定義した方が下、後から定義した方が上に表示されます。下の例ではz-indexでそれを逆にしています。z-indexは表示順を指定しますが、負の数も指定できます。例えば、-1 だと1つ前面へという意味になります。

<style>
	#top0 {
	  position: absolute;
	  left: 100px;
	  top: 500px;
	  width: 150px;
	  height: 100px;
	  border: solid medium black;
	  background-color: #c0c0ff;
	}

	#bottom0 {
	  position: absolute;
	  left: 110px;
	  top: 510px;
	  width: 150px;
	  height: 100px;
	  border: solid medium red;
	  background-color: #ffffc0;
	}

	#top1 {
	  position: absolute;
	  left: 300px;
	  top: 500px;
	  width: 150px;
	  height: 100px;
	  border: solid medium black;
	  background-color: #c0c0ff;
	}

	#bottom1 {
	  z-index: -1;
	  position: absolute;
	  left: 310px;
	  top: 510px;
	  width: 150px;
	  height: 100px;
	  border: solid medium red;
	  background-color: #ffffc0;
	}
 </style>
<div id="top0"></div>
<div id="bottom0"></div>

<div id="top1"></div>
<div id="bottom1"></div>

 

このページの先頭へ戻る