Programming/CSS
[CSS] Position : relative, absolute 위치 설정하기
aldrn29
2022. 6. 29. 00:12
CSS를 만질 때, position은 가장 기본이지만 헷갈리는 부분인 것 같다. 그래서 그 중에서도 많이 사용되는 relative, absolute를 정리해보았다.
728x90
Position 속성
| 속성 | 의미 |
| static | 기준 없음 (배치 불가능 / 기본값) |
| relative | 요소 자기 자신을 기준으로 배치 |
| absolute | 부모(조상) 요소를 기준으로 배치 |
| fixed | 뷰포트 기준으로 배치 |
| stickey | 스크롤 영역 기준으로 배치 |
위의 position 속성으로 기준을 잡고, 그 기준에 맞춰 위쪽, 아래쪽, 왼쪽, 오른쪽에서의 거리를 설정한다.
Relative vs Absolute
한 눈에 보기 좋은 참고 이미지가 있어서 가져와보았다. 위치 뿐만 아니라, 다른 요소에도 영향을 줄 수 있는 부분을 참고하면 좋을 것 같다.
position : relative
자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.
다른 요소들에 영향을 주지 않는다.
position : absolute
가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.
조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(<body>요소)를 기준으로 삼는다. (static을 제외한 값, position이 relative, fixed, absolute 하나라도 있어야 함)
문서 상 원래 위치를 잃어버린다. (절대 위치를 갖게 됨)
728x90
728x90