1. 포지셔닝이란?
- position 은 웹브라우저가 렌더링하는 기본 레이아웃 흐름(Normal Layout Flow)을 재정의하여 레이아웃 내부 일부 요소의 위치를 조정할 때 사용한다.
- 페이지의 다른 부분 위에 떠있는 UI 요소를 만들거나, 페이지의 스크롤과 상관없이 항상 동일한 위치에 자리한 UI 요소를 만들고자 할 때 사용한다.
2. 포지셔닝 레이아웃 유형
- static : 기본값
- relative : 상대 위치 설정
- 자신이 가지고 있는 일반 흐름 상 위치를 기준 점으로 이동할 때 사용한다.
- absolute : 절대 위치 설정
- 원래 위치와 상관없이 자유롭게 위치를 지정할 수 있다.
- 단, 가장 가까운 상위 요소를 기준으로 위치가 결정된다.
- fixed : 고정 위치 설정
- 원래 위치와 상관없이 고정된 위치를 지정할 수 있다.
- 단, 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 사용할 수 있다.
- 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
- sticky :
- 자신이 가지고 있는 일반 흐름 상 위치를 따르지만 스크롤 위치가 임계점에 이르면 fixed와 같이 화면에 고정할 수 있는 속성으로 사용한다.
- IE와 Edge 15 이하 버전은 지원하지 않는다.