[css]Position 속성 정리: fixed/static/absolute/relative

1. position:

요소를 배치할 때 사용하는 속성. 이미지의 겹침 사용한다.

 

2. position 속성

- static: 기본값

- relative : 요소 배치의 기준이 될 때 부여하는 속성

- absolute: 가장 가까운 위치에 있는 조상요소를 기준으로 배치

- fixed: 뷰포트 기준으로 배치. 고정된 헤더가 필요할 때 주로 사용됨.

- stickey: 스크롤 영역 기준으로 배치.

 

3. top, bottom, left, right를 이용해 요소를 배치한다.

 

4. 가상선택자 사용의 경우에도 보통 position 속성을 사용한다.

 

5. position: absolute

• 부모요소에 position이 있는 경우:
  부모요소를 위치의 기준으로 삼는다.
• 부모요소가 아닌 조상요소에 position이 있는 경우
  조상요소를 위치의 기준으로 삼는다.
• 조상요소에 position 값이 없는 경우
  뷰포트를 기준으로 삼는다. => 이 경우 position fixed를 사용한다.