CSS Position
position속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다.top,bottom,left,right속성을 통해 요소의 최종 위치를 결정한다.
Position 속성
-
static- 기준 없음(배치 불가능/기본값)
- 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.
-
relative- 요소 자기 자신을 기준으로 배치
- static이었을 때의 위치를 기준으로 지정한 만큼 이동
-
absolute- 부모(조상) 요소를 기준으로 배치
position: static속성을 가지고 있지 않은 가장 가까운 조상의 내부 여백 영역을 컨테이닝 블록으로 하여 움직인다. 만약 조상 중에 포지션이 relative, absolute, fixed, sticky인 태그가 없다면 가장 상위 태그(body)가 기준이 된다.
-
fixed- 뷰포트 기준으로 배치
- 보통 header에 자주 사용(
position: fixed; top: 0; left: 0; z-index: 999;)
-
sticky- 스크롤 영역 기준으로 배치
- 처음에는 relative와 같이 동작하다가 스크롤 시 지정해놓은 지점에서 요소를 고정시킨다.
- sticky 속성을 갖는 요소들은 자신의 부모 요소 안에서만 적용됨
- 부모 태그에 무조건 height 값이 들어가 있어야 함
- 부모 요소 중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안된다.
💡 뷰포트(viewport)란?
웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체 화면이라면 화면 전체)를 말한다. 뷰포트 바깥의 콘텐츠는 스크롤하기 전에는 보이지 않는다.
Top, Bottom, Left, Right 속성
기준점을 잡았으면 다음 4가지 속성을 이용해서 요소의 위치를 옮길 수 있다. 요소의 Position 기준에 맞춰 위쪽, 아래쪽, 왼쪽, 오른쪽에서의 거리를 설정한다.
top: 요소의 position 기준에 맞는 위쪽에서의 거리(위치)를 설정bottom: 요소의 position 기준에 맞는 아래쪽에서의 거리(위치)를 설정left: 요소의 position 기준에 맞는 왼쪽에서의 거리(위치)를 설정right: 요소의 position 기준에 맞는 오른쪽에서의 거리(위치)를 설정
예시
-
static, absolute, relative, fixed
See the Pen CSS Position practice - static, relative, absolute, fixed by 백지연 (@zero0205) on CodePen.
-
sticky
See the Pen CSS Position practice - sticky by 백지연 (@zero0205) on CodePen.
