꿈꾸는 개발자의 블로그
[CSS] Position : relative, absolute 위치 설정하기 본문
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
'Programming > CSS' 카테고리의 다른 글
| [CSS] Styled-components + 터치 스크롤 구현하기 (0) | 2022.07.08 |
|---|---|
| [CSS] 선형 그라데이션 효과 넣기 (색깔 밑줄 긋기) (0) | 2022.07.01 |
| [CSS] Styled-components + 동영상으로 화면 전체 채우기 (0) | 2022.06.25 |
| [CSS] Next.js Image + 화면 아래 가리키는 화살표 애니메이션 (0) | 2022.06.13 |
| [CSS] 선택자(Selector) 종류와 사용 방법 (0) | 2022.06.09 |
'Programming/CSS' Related Articles
more
Comments