Position CSS 속성
position 속성은 위치를 조절하는 데 사용됩니다.
이 속성은 요소를 문서 내에서 어떻게 배치할지 결정하며, 다양한 값으로 설정할 수 있습니다:
속성 | 설명 |
static | 기본값. |
relative | 지정한 값만큼 떨어진곳에 배치. |
absolute | 가장 가까운 상위 요소 위치를 기준으로 지정한 값만큼 떨어진 곳에 배치. |
fixed | 웹 브라우저 화면 전체를 기준으로 배치한다. 스크롤 해도 위치는 고정. |
sticky | 최초 relative속성과 같이 동작하다가 , 스크롤시 지정 지점에서 요소를 고정. |
static
static: 이 값은 기본값입니다.
position: static을 가진 요소는 문서의 일반적인 흐름에 따라 배치됩니다.
상단(top), 오른쪽(right), 하단(bottom), 왼쪽(left) 및 z-index 속성은 이 위치 값에 영향을 주지 않습니다.
position: static;
relative
position: relative를 가진 요소는 문서 흐름 내에서 일반적인 위치를 기준으로 배치됩니다.
top, right, bottom, left와 같은 속성을 사용하여 요소의 원래 위치에서 이동시킬 수 있습니다.
다른 요소는 여전히 원래 공간을 차지합니다.
position: relative;
absolute
position: absolute를 가진 요소는 가장 가까운 static이 아닌 조상 요소를 기준으로 배치됩니다.
만약 위치 지정된 조상이 없으면 초기 컨테이닝 블록(일반적으로 요소)을 기준으로 배치됩니다.
이로 인해 요소는 일반적인 문서 흐름에서 벗어나며, 다른 요소는 해당 공간을 차지하지 않습니다.
position: absolute;
fixed
position: fixed를 가진 요소는 화면 내의 뷰포트(브라우저 창)를 기준으로 배치됩니다.
스크롤을 해도 고정된 위치에 유지되며, 일반적으로 고정된 헤더, 푸터 또는 내비게이션 바를 만드는 데 사용됩니다.
position: fixed;
sticky
position: sticky를 가진 요소는 relative와 fixed의 조합과 같은 역할을 합니다.
처음에는 일반적인 흐름에 따라 배치되며, 특정한 오프셋에 도달하면 고정됩니다.
다시 위로 스크롤할 때 상대적인 위치로 돌아갑니다.
position: sticky;
sticky가 동작안하는 이유?
부모요소 조건있음
- sticky속성을 갖는 요소들은 자신의 부모 요소 안에서만 적용됨.
- 부모태그에 무조건 height 높이 값이 들어가 있어야 함.
부모 height 높이 값만큼 sticky가 고정.
부모요소 중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안 된다.
position 속성을 관련된 top, right, bottom, left와 함께 사용하여 웹페이지에서 요소의 위치를 정밀하게 제어할 수 있습니다.