CSS position

position 속성은 문서 상에서 요소를 배치하는 방법 지정한다.

 

• static(기본값)

        : 일반적인 문서 흐름에 따라 배치

 

• relative

        : 일반적인 문서 흐름을 유지하며 배치.

        : 자신 기준으로 offset(top, right, bottom, left값. 기준이 되는 곳으로부터 얼마나 떨어져있는지 나타내는 속성) 적용.

        : offset값을 주지 않으면 static을 기준으로 배치된다.

        : 부모 요소에 relative + 자식 요소에 absolute으로 사용.

 

• absolute

        : 일반적인 문서 흐름에서 제거.

        : 가장 가까운 위치의 static이 아닌 부모 요소에 대해 상대적으로 배치. 없다면, html까지 올라가 페이지 전체를 기준으로 위치 결정.

 

• fixed

        : 일반적인 문서 흐름에서 제거. 

        : 뷰포트(화면에서 실제 내용이 표시되는 영역)의 초기 컨테이닝블록을 기준 삼아 배치. 바뀌지 않는 위치에 지정

 

• sticky : static & fixed 특징 동시에 가진다.