이미지 보기

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

21.07.07 작성

22.02.07 수정

읽는 데 2분

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가 더 나중에 쓰여졌음에도 말이다.

FE Developer 박승훈

노력하는 자는 즐기는 자를 이길 수 없다

Github

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

TOC

z-index란?