개발/CSS
Position 속성
함수형 인간
2025. 2. 17. 23:26
https://www.daleseo.com/css-position/
CSS의 5가지 position 속성 값 기본 정리
Engineering Blog by Dale Seo
www.daleseo.com
CSS position 속성 정리
웹 페이지 디자인의 핵심! CSS position 속성은 HTML 요소를 원하는 위치에 자유롭게 배치하는 데 사용된다.
position 속성과 함께 top, right, bottom, left 속성을 활용하면 요소의 위치를 정밀하게 제어할 수 있다.
1. position: static (기본값)
- 별도로 position 속성을 지정하지 않으면 기본적으로 static이 적용된다.
- 요소는 HTML 문서에 작성된 순서대로, 원래 있어야 할 위치에 배치된다.
- top, right, bottom, left 속성은 무시된다.
2. position: relative (상대 위치)
- 요소를 원래 위치를 기준으로 상대적으로 이동시킨다.
- top, right, bottom, left 속성을 사용하여 원래 위치에서 얼마나 떨어져 있을지 지정.
- 다른 요소와의 관계는 유지된다.
3. position: absolute (절대 위치)
- 요소를 문서 흐름에서 완전히 제거하고, 특정 위치를 기준으로 배치한다.
- 배치 기준은 다음과 같이 결정됩니다.
- position 속성이 static이 아닌 가장 가까운 부모 요소
- 부모 요소가 없는 경우 <body> 요소
- top, right, bottom, left 속성은 설정된 기준으로부터의 거리를 나타낸다.
- 일반적으로 position: relative인 부모 요소 내부에 position: absolute인 자식 요소를 배치하는 방식으로 사용된다.
- 다른 요소와 겹쳐 배치될 수 있으며, 문서 흐름에서 제외되므로 다른 요소의 배치에 영향을 주지 않는다.
4. position: fixed (고정 위치)
- 요소를 브라우저 화면(viewport)을 기준으로 고정된 위치에 배치한다.
- 스크롤해도 요소는 화면의 특정 위치에 고정되어 움직이지 않는다.
- top, right, bottom, left 속성은 브라우저 화면의 각 모서리로부터의 거리를 나타낸다.
- position: absolute와 마찬가지로 문서 흐름에서 제외된다.
5. position: sticky (스크롤 고정 위치)
- 요소가 일반적인 문서 흐름에 따라 배치되다가, 특정 스크롤 위치에 도달하면 fixed처럼 화면에 고정된다.
- top, right, bottom, left 속성을 사용하여 고정되는 위치를 설정.
position 속성 활용 팁
- position: relative는 요소의 원래 위치를 기준으로 약간의 이동을 줄 때 유용.
- position: absolute는 부모 요소 내에서 자유롭게 요소를 배치할 때 효과적.
- position: fixed는 화면에 항상 표시되어야 하는 요소 (예: 고정 메뉴, 채팅 버튼)에 사용됨.
- position: sticky는 스크롤에 따라 내용이 고정되는 효과를 줄 때 유용.
position 속성 사용 시 주의사항
- position: absolute 또는 position: fixed인 요소는 문서 흐름에서 제외되므로, 주변 요소의 배치에 영향을 줄 수 있다.
- z-index 속성과 함께 사용하여 요소의 겹침 순서를 조절할 수 있다.