z-index

https://www.daleseo.com/css-z-index/

CSS의 z-index 속성 이해하기

 

CSS z-index 속성  정리

웹 페이지를 2차원 공간으로 생각하기 쉽지만, 실제로는 요소들을 앞뒤로 겹쳐 배치해야 하는 경우가 있다.

이때 필요한 것이 바로 CSS의 z-index 속성이다.

z-index는 요소의 Z축 방향 깊이를 결정하여 겹쳐진 요소들의 표시 순서를 조절하는 역할을 한다.

1. z-index가 없을 때 요소 간 깊이

z-index 속성이 없을 때 요소 간 깊이는 다음과 같은 규칙에 따라 결정된다.

• HTML 문서 순서: 나중에 나오는 요소가 먼저 나오는 요소보다 위에 위치.
• position 속성: position: static이 아닌 요소(relative, absolute, fixed, sticky)는 position: static인 요소보다 위에 위치.
• position 속성이 static이 아닌 요소 간 순서: HTML 문서 순서에 따라 결정.

2. z-index가 있을 때 요소 간 깊이

z-index 속성을 사용하면 위 규칙을 무시하고 요소의 깊이를 조절할 수 있다.

• z-index 값: 값이 클수록 요소가 앞으로 나오고, 작을수록 뒤로 간다.
• position 속성: position: static인 요소에는 z-index 속성이 적용되지 않는다.
• 음수 z-index: 음수 값을 사용하면 요소를 position: static인 요소보다 뒤에 배치할 수 있다.

3. stacking context: z-index 비교 범위

z-index는 전체 문서가 아닌 특정 범위 내에서 비교되는데, 이 범위를 stacking context라고 한다.

• 기본 원칙: 요소는 자신이 속한 stacking context 내에서만 z-index 값을 비교한다.
• stacking context 형성 조건:
  • position 속성이 static이 아닌 경우
  • z-index 속성이 auto가 아닌 경우
  • 기타 특정 속성 (opacity, transform 등)이 특정 값을 가진 경우

4. z-index 사용 시 주의사항

• 남용 금지: z-index를 너무 많이 사용하면 스타일 유지보수가 어려워질 수 있다.
• stacking context 이해: z-index가 적용되는 범위를 이해해야 예상치 못한 문제를 방지할 수 있다.
• 접근성: z-index로 시각적인 순서를 변경하더라도 스크린 리더 등 보조 기술에서는 HTML 구조 순서대로 읽히므로, 접근성 문제가 발생할 수 있다.

5. z-index 활용 팁

• 최소한의 사용: 필요한 경우에만 z-index를 사용하고, 최대한 HTML 구조 순서대로 요소를 배치하는 것이 좋다.
• 명확한 stacking context: stacking context를 명확하게 구분하여 z-index 값을 관리하는 것이 좋다.
• 시각적 계층 고려: 디자인 의도에 맞는 시각적 계층을 고려하여 z-index 값을 설정해야 한다.