CSS - 문제 미리보기
문제 1246
medium
다음 CSS에서 absolute 요소가 위치를 결정하는 기준은?
```css
.parent {
position: relative;
width: 300px;
height: 200px;
}
.child {
position: absolute;
top: 20px;
left: 30px;
}
```
정답: B
position: absolute의 기준점 결정 규칙:
가장 가까운 positioned 조상 찾기:
• positioned: static이 아닌 position 값을 가진 요소
• 부모부터 상위로 올라가며 첫 번째 positioned 요소를 찾음
• .parent가 `position: relative`이므로 기준점이 됨
기준점 결정 과정:
1. .child의 부모인 .parent 확인
2. .parent가 `position: relative` → positioned 요소
3. .parent를 기준점으로 설정
4. top: 20px, left: 30px는 .parent 기준으로 적용
만약 positioned 조상이 없다면:
• body 요소를 기준으로 위치 결정
• 페이지 스크롤 시 함께 이동
실무에서의 패턴:
• 부모에 `position: relative` 설정
• 자식에 `position: absolute`로 정확한 위치 지정
• 모달, 툴팁, 드롭다운 메뉴 구현에 필수
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.