728x90
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와 함께 사용하여 웹페이지에서 요소의 위치를 정밀하게 제어할 수 있습니다.
728x90
