position 속성이란
position은 HTML 요소를 원하는 위치에 배치하기 위해서 사용하는 속성이다. 위치를 정확히 지정하기 위해 top, bottom, left, right 속성과 함께 사용된다.
static
position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다.static은 기본 문서 흐름에 따라 요소를 배치하기 때문에 position이 static인 요소들은 문서에서 작성된 순서대로 브라우저 화면에 표시된다. 이 때 top, left, bottom, right 속성은 무시된다.
<main>
<div>1</div>
<div>2</div>
<div>3</div>
</main>relative
position 속성을 relative로 설정하면, 요소의 원래 위치(static)를 기준으로 상대적인 위치를 지정해줄 수 있다.
이 때, 문서의 일반적인 흐름에서 요소가 제거되지는 않고 공간을 그대로 차지한다.
top: 원래 위치에서 요소를 아래로 얼마나 이동할 것인지bottom: 원래 위치에서 요소를 위로 얼마나 이동할 것인지left: 원래 위치에서 요소를 왼쪽으로 얼마나 이동할 것인지right: 원래 위치에서 요소를 오른쪽으로 얼마나 이동할 것인지
absolute
position 속성을 absolute로 정하면, 요소는 문서의 일반적인 흐름에서 제거되며, 공간을 차지하지 않는다.
배치 기준은 자신이 아닌 상위 요소에서 찾는다. DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 가장 가까운 상위 요소를 배치 기준으로 설정한다. 이 때, static이 아닌 요소가 없다면, <body> 요소가 배치의 기준이 된다.
그러나 보통의 경우, 부모 요소의 position을 relative로 지정해주는 것이 관례이다.
fixed
position 속성을 fixed로 지정하면, 항상 고정된 위치에 배치할 수 있다. 요소는 문서의 흐름에서 제거되며, 공간을 차지하지 않는다.
fixed 속성값의 배치 기준은 자신부모 요소가 아닌 뷰포트(브라우저 전체 화면) 이다.
top: 뷰포트 상단에서의 거리bottom: 뷰포트 하단에서의 거리left: 뷰포트 왼쪽에서의 거리right: 뷰포트 오른쪽에서의 거리
sticky
position속성을 sticky로 설정하면, 스크롤 위치에 따라 요소의 위치가 결정된다. sticky 요소는 스크롤 위치에 따라 relative와 fixed 사이를 전환한다. 뷰포트에서 지정된 오프셋(top, left, bottom, right) 위치에 도달하기 전까지는 relative로 동작하고, 지정된 오프셋에 도달하는 경우 해당 위치에 고정되어 fixed처럼 동작한다.
'기초 학습 > CSS' 카테고리의 다른 글
| [CSS] background- 배경 (0) | 2025.01.15 |
|---|---|
| [CSS] transform (2) | 2025.01.01 |
| [CSS] 투명도 조절하는 법( 불투명도, 알파 채널 ) (0) | 2024.12.13 |
| [CSS] CSS의 단위 (Relative, Absolute) (3) | 2024.12.13 |
| [CSS] Display 속성 (inline / block/ inline-block) (1) | 2024.12.12 |