CSS - 문제 미리보기
문제 1252
hard
다음 코드에서 실제 화면에 표시되는 요소들의 쌓임 순서는? (위에서부터)
```css
.element-a {
position: relative;
z-index: 3;
}
.element-b {
position: absolute;
z-index: 1;
}
.element-c {
position: relative;
z-index: 2;
}
.element-d {
position: static;
z-index: 999;
}
```
정답: C
z-index 적용 규칙과 예외 상황:
각 요소별 분석:
element-a (z-index: 3):
• `position: relative` → positioned 요소
• z-index 적용됨
• 가장 높은 값 → 1순위 (가장 위)
element-c (z-index: 2):
• `position: relative` → positioned 요소
• z-index 적용됨
• 두 번째로 높은 값 → 2순위
element-b (z-index: 1):
• `position: absolute` → positioned 요소
• z-index 적용됨
• 가장 낮은 값 → 3순위
element-d (z-index: 999):
• `position: static` → 기본값
• positioned 요소가 아니므로 z-index 무시됨
• 일반 문서 흐름을 따라 배치
• positioned 요소들과 별개의 레이어
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.