static (default)
아무런 특정 포지션을 지정하지 않은 상태
top
, bottom
, right
, left
, z-index
값을 주어도 아무 변화 없음
relative
position: relative;
를 설정한 후에 아무 속성도 추가하지 않으면 그저 static과 똑같은 상태. 하지만 top
, bottom
, right
, left
, z-index
값을 지정할 수 있음. 자신의 원래 위치에서 이동.
absolute
문서 내 원래 위치에서 제거. 조상 중 position: static;
이 아닌 포지션 값을 가지고 있는 요소 기준으로 움직임. top
, bottom
, right
, left
, z-index
값 지정.
fixed
문서 내 원래 위치에서 제거. 뷰포트 기준으로 위치를 잡음. top
, bottom
, right
, left
값으로 지정된 위치에 항상 위치해 있음.
inline
줄바꿈이 되지 않는 인라인 요소. 내용 만큼의 영역을 차지한다. width, height 값을 줄 수 없음.
block
한 row 전체를 차지하는 요소. 기본적으로 내용만큼의 height와 전체화면만큼의 width를 가진다. width, height 값을 지정할 수 있다.
inline-block
인라인 요소처럼 작용하지만, width/height 값을 지정할 수 있다.