본문으로 건너뛰기
실습하기

요소의 높이를 결정하는 z-index

CSS에서 z-index 속성은 HTML 요소의 층 높이를 나타내며, HTML 요소 간의 겹침 순서를 조절합니다.

카드 더미를 만들 때 어떤 카드가 위에 오고 어떤 카드가 아래에 오는지 결정하는 것과 비슷합니다.

z-index 값이 높을수록 해당 요소는 z-index가 낮은 다른 요소들 위에 표시됩니다.


기본 규칙​

  • z-index는 position 속성이 relative, absolute, fixed와 같이 static이 아닌 요소에만 적용됩니다.

  • z-index는 정수 값을 가집니다. 양수, 음수, 0 모두 가능합니다.

예시:

CSS
div#one {
  position: absolute;
  z-index: 1;
}

div#two {
  position: absolute;
  z-index: 2;
}

이렇게 설정하면 div#two 요소가 div#one 요소 위에 표시됩니다


음수 사용​

z-index에 음수 값을 부여하면, 요소가 다른 요소 뒤에 위치하게 됩니다.

예시:

CSS
div#one {
  position: relative;
  z-index: -1;
}

  • div#one 요소는 z-index 값이 -1로 설정되어, 다른 요소들 뒤에 표시됩니다.

  • z-index를 사용하여 웹 페이지의 여러 요소들 사이의 겹침 순서를 자유롭게 조절할 수 있습니다.


코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!