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

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

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

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

z-index는 정수 값을 가지며, position 속성이 relative, absolute, fixed와 같이 static이 아닌 요소에만 적용됩니다.

z-index 속성 사용법
#one {
  position: absolute;
  z-index: 1;
}

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

위 CSS 코드에 의해 two라는 id를 가진 요소는 one이라는 id를 가진 요소 위에 표시됩니다.

z-index에 음수를 사용하면?

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

예시:

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

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

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

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