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

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

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

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

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

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

예시:

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

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

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

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

예시:

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

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

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

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