TIL02. Position 속성

1. Position 속성이란?

Position 속성은 페이지 상에 요소를 배치하는 방법으로 top, right, bottom, left 속성으로 요소의 위치를 결정합니다.

1.1 Position 사용법

• Static
  : Position 속성의 기본 값으로 요소를 문서 흐름에 따라 배치합니다. 요소를 나열한 순서대로 배치하며 Top, Bottom, Left, Right 속성을 사용할 수 없습니다.

• Relative
  : 요소를 문서 흐름에 따라 배치하고 배치된 위치를 기준으로 상대적 위치를 지정할 수 있고 Top, Bottom, Left, Right 속성 값에 따라 오프셋을 적용합니다.

• Absolute
  : 문서의 흐름과 상관없이 Top, Bottom, Left, Right 속성 값으로 위치를 지정합니다.

• Fixed
  : Absolute 속성과 마찬가지로 문서의 흐름과 상관없이 Top, Bottom, Left, Right 속성 값으로 위치를 지정하며 페이지 스크롤 이동하여도 모든 페이지에서 같은 위치에 출력됩니다.

• Sticky
  : Top, Bottom, Left, Right 속성 값으로 위치를 지정하고 설정된 위치에 도달하기 전까지 Static 처럼 동작하지만 설정된 위치에 도달하면 Fixed 처럼 동작합니다.