position의 속성과 특징

yjkim·2024년 3월 14일

position 속성

원래 있어야 할 위치에서 벗어나 요소를 자유롭게 배치할때 쓰는 속성이다. position에 따라서 위치를 정하는 기준이 달라진다.
position의 속성 종류에는 static, relative, absolute, fixed, sticky 가 있다.

position의 속성 특징

1. static

position 속성의 기본값으로 원래 있어야 할 위치에 그대로 있다.

2. relative

원래 있어야할 위치를 기준으로 배치하는 것이고 이때 요소의 자리는 그대로 차지한다.

3. absolute

가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치하는 것이고 이때 요소의 자리는 차지하지 않는다.

4. fixed

브라우저 화면을 기준으로 고정된 배치이다. 요소의 원래 자리는 차지하지 않으며 스크롤 시에도 고정되어 배치된 상태 그대로를 유지한다.

5.sticky

static처럼 원래 위치에 배치되어 있다가 정해진 위치에 스크롤되면 그때부터 fixed처럼 고정되어 배치된다. 기본적으로는 static 처럼 배치되어 있기 때문에 요소의 원래 자리는 유지한다.

0개의 댓글