Position

Position

• 속성 : HTML 요소가 위치를 결정하는 방식을 설정
• 방식
  ① static position(정적 위치) 지정 방식
  ② relative position(상대 위치) 지정 방식
  ③ fixed position(고정 위치) 지정 방식
  ④ absolute position(절대 위치) 지정 방식

1. static position(정적 위치)

• 가장 기본적인 방식
• static 사용 시 top, right, bottom, left 속성값에 영향을 받지 않음
• 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식

2. relative position(상대 위치)

• 해당 HTML 요소의 기본 위치(해당 요소가 static position 일 때 결정되는 위치를 의미)를 기준으로 위치를 설정하는 방식

3. fixed position(고정 위치)

• viewport(뷰포트)를 기준으로 위치를 설정하는 방식
• 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치

4. absolute position(절대 위치)

• 위치가 설정된 ancestor 요소를 기준으로 위치를 설정

static과 다른 방식들과의 차이점

• static position을 제외한 나머지 방식들은 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식