728x90
반응형
CSS의 `position` 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.
`static`, `relative`, `absolute`, `fixed`, `sticky`와 같은 속성을 사용해 요소를 배치할 수 있습니다.
각 속성은 아래와 같은 특징이 있습니다.
- `static` : 요소를 일반적인 문서 흐름에 따라 배치합니다. 이는 기본값으로, 모든 요소는 별도 position 값을 지정하지 않으면 static이 적용됩니다.
- `relative` : static의 특성을 가지면서 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용할 수 있습니다. 다른 요소들에는 영향을 주지 않고 해당 요소만 이동됩니다.
- `absolute` : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 position이 지정된(static이 아닌) 조상 요소를 기준으로 배치됩니다. 주로 position: relative를 가진 부모 요소 안에서 사용됩니다.
- `fixed` : 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트(브라우저의 보이는 영역)를 기준으로 배치됩니다. 스크롤을 해도 항상 같은 위치에 고정되어 있습니다.
- `sticky` : static과 fixed의 특징을 동시에 가집니다. 스크롤 위치가 임계점에 도달하기 전에는 static처럼 동작하고, 임계점에 도달한 후에는 fixed처럼 동작하여 화면에 고정됩니다.
728x90
반응형