CSS - z-index 속성

z-index 는 요소를 쌓는 순서를 정합니다. 요소 위에 다른 요소를 쌓을 수 있고, 순서를 달리 할 수도 있습니다.

z-index 는 position 의 absolute, relative, fixed 일 때만 동작하며 음수를 사용할 수 있습니다.

z-index: <숫자>

쌓는 순서는 작은 수가 아래에 가고 큰 수가 위에 쌓입니다.

<style>
#use-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  border: 1px solid;
  background: #eee;
}
#use-wrapper div{
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid;
}

.hh1{
  top:0;
  left:0;
  background: blue;

  /* 첫 번째에 쌓입니다. */
  z-index: 1;
}
.hh2{
  top:10px;
  left:10px;
  background: red;

  /* 두 번째에 쌓입니다. */
  z-index: 2;
}
.hh3{
  top: 20px;
  left:30px;
  background: yellow;

  /* 세 번째에 쌓입니다. */
  z-index: 3;
}
</style>

<div id="use-wrapper">
  <div class="hh1">z-index 1</div>
  <div class="hh2">z-index 2</div>
  <div class="hh3">z-index 3</div>
</div>

z-index 1

z-index 2

z-index 3