요소의 배치 순서 지정 - z-index

앞에 나와야 할 요소가 가려지는 등 난처할 때들이 있었다.

z-index 속성을 사용하면 요소의 배치 순서를 정할 수 있어서 가려지는 현상을 해결할 수 있다.

 

position이 static이 아닌 경우에만 적용이 가능하다.

5개의 겹쳐 있는 div이다. 이제 이 요소에 순서를 지정하여 배치 순서를 변경할 수 있다.

 

요소별 css에 z-index:값을 입력하면 값에 따라 순서가 바뀐다.

z-index값이 클수록 앞으로 나오며, 보통 9999는 항상 상단에 위치해야 할 때, -1은 항상 뒤에 나와야 할 때 스인다.

 

역순 출력을 위하여 1번~5번 div에 각각 5~1의 z-index값을 부여했다.

// HTML
<div id="a">1번 DIV</div>
<div id="b">2번 DIV</div>
<div id="c">3번 DIV</div>
<div id="d">4번 DIV</div>
<div id="e">5번 DIV</div>

// CSS
div{
  width: 150px;
  height: 150px;
  position: absolute;
}
#a{
  background-color:#0489B1;
  top:0px;
  left:0px;
  z-index:5;
}
#b{
  background-color:#00BFFF;
  top:20px;
  left:20px;
  z-index:4;
}
#c{
  background-color:#58D3F7;
  top:40px;
  left:40px;
  z-index:3;
}
#d{
  background-color:#819FF7;
  top:60px;
  left:60px;
  z-index:2;
}
#e{
  background-color:#A9A9F5;
  top:80px;
  left:80px;
  z-index:1;
}

 

z-index값에 따라 값이 큰 요소부터 앞에 출력되어 아까와는 다르게 1번이 맨 앞, 5번이 맨 뒤에 위치했다.

 

예제 소스

 

See the Pen z-index by jess (@jess44) on CodePen.