CSS (Position)

Position 속성은 내가 원하는 위치로 원하는 컨텐츠를 배치할 수 있는 중용한 속성이다.
static을 제외한 relative, absolute, fixed는 top, left, bottom, right 속성과 함께 사용이 가능하다.

1. 절대 위치(absolute position) 지정 방식

절대 위치(absolute position)지정 방식 고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작한다.
position: relative 속성과 함꼐 쓰이는 속성이다.
가장 가까운 부모 요소에 있는 relative를 찾아서 그 요소의 위치를 기준으로 위치를 잡는다.

2. 고정 위치(fixed position) 지정 방식

고정 위치(fixed position)지정 방식은 뷰포트(viewport)를 기준으로 위치를 설정하는 방식입니다.
즉, 웹 페이자가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 됩니다.

3.상대 위치(relative position) 지정 방식

상대 위치(relative position)지정 방식은 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식입니다.
주로 position: absolute; 속성과 함께 쓰이는 속성이다.
자식 요소에 적용된 absolute의 위치에 대한 기준을 잡는다.

4.정적 위치(static position) 지정 방식

정적 위치(static position)지정 방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식이다.
position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않는다.
또한, HTML요소의 position속성의 기본 설정값은 Static로 사용한다.