position 속성 - static, relative, absolute, fixed, sticky
1. position 속성 이란?
- 문서 상에 요소를 배치하는 방법을 지정할때 사용하는 속성
- 위치결정은 top, right, bottom , left 속성으로 결정
- 추가로 하나의 키워드값을 선택해 지정해줄수 있다.
2. position 속성의 5가지 키워드
2-1. static
- 기본값
- 위치결정 속성인 top, right, bottom , left 속성을 사용할 수 없다.
2-2. relative
- 본인의 현재 위치를 기준으로 배치된다.
- 배치이후 위치결정은 위치결정 속성인 top, right, bottom , left 속성 값에 따라 배치한다.
- 배치유형 : 상대적 위치 지정
2-3. absolute
- 가장 가까운 position:relative속성이 부여된 부모태그를 기준으로 배치한다.
- 기준이 잡히면 그 기준에서 위치결정 속성인 top, right, bottom , left 속성 값에 따라 배치한다.
- 태그의 크기는 안에 있는 내용(content)기준이 된다.
- 항상 부모를 기준으로 배치한다.
- 배치유형 : 절대적 위치 지정
2-4. fixed
- 현재 보여지고 있는 화면(뷰포트)을 기준으로 배치한다.(스크롤을 무시한다.)
- 그 위치는 위치결정 속성인 top, right, bottom , left 속성 값에 따라 배치한다.
- 태그의 크기는 안에 있는 내용(content)기준이 된다.
- 항상 보여주
- 배치유형 : 절대적 위치지정
2-5. sticky
- top, right, bottom, left 속성이 필수
- 스크롤을 따라 움직임.
- 부모태그박스의 범위내에서 스크롤을따라 움직임.(이동의 한계가 있음)
3. 배치 우선순위