Orchemi

Orchemi

I start where others stop.

[CSS] 레이아웃에 영향을 주는 CSS 속성 ‘z-index’

작성:    

업데이트:

카테고리:

태그: , ,

z-index란?

  • 레이어 z축을 조정하는 속성
  • fixed, relative, absolute 속성값과 함께 사용
*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>z-index의 활용</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="z-index-1"></div>
    <div id="z-index-2"></div>
  </body>
</html>

* css 파일 # z-index-1 {
  position: absolute;
  width: 100%;
  height: 200px;
  background-color: yellow;
}

# z-index-2 {
  position: absolute;
  width: 100%;
  height: 200px;
  background-color: blue;
}

위의 html 문서와 css 문서처럼 설정하면, position이 absolute이고, z-index-2(파란색 박스)에 의해 z-index-1(노란색 박스)는 가려지고, 결국 파란색 박스만 보이게 된다.

하지만 z-index-1의 height 속성값을 300px 로 조정하면 파란색 박스 뒤에 노란색 박스가 숨겨져 있다는 사실을 다시 알 수 있다. 이는 나중에 적용된 HTML 요소가 상위 레이어에 위치하는 탓이다.

이때 우리는 z-index 속성값을 이용해, 레이어의 위치를 임의로 설정할 수 있다. z-index의 크기가 클수록 상위 레이어에 위치한다.

* css 파일 # z-index-1 {
  position: absolute;
  width: 100%;
  height: 200px;
  background-color: yellow;
  z-index: 10;
}

# z-index-2 {
  position: absolute;
  width: 100%;
  height: 200px;
  background-color: blue;
  z-index: 5;
}

이렇게 하면 z-index: 10인 z-index-1(노란색 박스)가 z-index: 5인 z-index-2(파란색 박스)의 위에 위치하게 된다. HTML의 코드가 z-index-2가 더 나중에 쓰여졌음에도 말이다.

댓글남기기

참고