position
속성은 CSS에서 문서 상에 요소를 배치하는 속성으로, static
, relative
, absolute
, sticky
, fixed
이렇게 총 5가지 값이 있다. 하나씩 소개해보도록 하겠다.
static
- 요소를 일반적인 문서 흐름에 따라 배치한다.
top
, right
, bottom
, left
, z-index
속성이 아무런 영향을 주지 못하고 무시된다.
- position 속성의 기본값이다. position을 선언하지 않으면 기본적으로
position: static;
이 된다.
- 어떤 요소에
position: 다른 속성;
을 줬다가 reset 해줄 때 사용한다.
relative
- 요소를 일반적인 문서 흐름에 따라 배치한다.
- 자기 자신을 기준으로
top
, right
, bottom
, left
의 값에 따라 위치가 바뀐다. 즉, 요소를 원래 위치를 기준으로 상대적으로 배치해준다.
absolute
- 요소를 일반적인 문서 흐름에서 제거한다.
- 절대적일 것 같지만 상당히 상대적인 속성 값이다. 가장 가까운 조상 요소에 position이 있을 경우 그 위치에 대해 상대적으로 배치한다.
- 조상 중 아무도 position을 쓰지 않았다면 document를 기준으로 삼는다.
sticky
- 요소를 일반적인 문서 흐름에 따라 배치한다.
- 가장 가까운 스크롤 되는 조상과 테이블 관련 요소를 포함한 가장 가까운 블록 레벨 조상을 기준으로
top
, right
, bottom
, left
의 값에 따라 위치가 바뀐다.
- 한 마디로 말해서 sticky 속성 값은 스크롤이 되어서 해당 요소가 화면에 나오면 고정시킨다는 특성을 가지고 있다.
- 가장 가까운 조상에 overflow 속성이 있다면 sticky가 동작하지 않는다.
fixed
- 요소를 일반적인 문서 흐름에서 제거한다.
- 문서를 인쇄할 때는 해당 요소가 모든 페이지의 같은 위치에 출력된다.
- 한 마디로 말해서 fixed 속성 값은 항상 화면에 고정이 되는 요소를 만들고자 할 때 사용한다라고 생각하면 편하다.
예시