position이란 !?
1) 화면 상에서 객체를 배치하거나 위치를 변경할 때 사용한다.
2) css 속성이며 아들태그에 상속이 되지 않는다.
3) top, right, bottom, left 등을 사용하여 위치를 설정할 수 있다.
position의 속성
1) position: static; → 정적 위치 (모든 html 요소의 position 속성의 기본값)
-
위치를 지정하지 않을 때 사용
(top, right, bottom, left의 속성값의 영향을 받지 않는다.)position: static 적용
2) position: relative; → 상대 위치
- 자기 자신의 태그보다 하위 태그에 가장 가까운 absolute에게 자기 자신의 공간을 제공
left와 top으로 위치를 적용하기 전
left와 top으로 위치 적용 후
3) position: absolute; → 절대 위치
- 자기 자신의 태그보다 상위 태그에 가장 가까운 relative를 찾아 기준 위치를 잡을때 사용
(만약 relative가 없을 경우 body태그를 기준으로 위치를 잡는다. → 기준점: 브라우저 왼쪽 위 꼭지점) - 형제간에는 relative가 적용되지 않는다.
position: absolute 속성
position: static, relative, absolute
4) position: fixed; → 고정 위치
- 화면상에서 지정한 위치에 그대로 고정되어 있으며 스크롤을 내려도 똑같은 자리에 그대로 남아 있음
- absolute와 마찬가지로 상위 태그 중 가장 가까운 relative의 기준을 가져감
→ 기준점: 브라우저 왼쪽 위 꼭지점
5) position: sticky; → 정적, 고정 위치
- 평소에 문서 안에서 position: relative 상태와 같이 일반적인 흐름에 따르지만,
스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성
스크롤이 맨 위에 있을 때
스크롤이 조금 내려왔을 때
스크롤이 많이 내려왔을 때
6) fixed와 sticky의 차이
- 스크롤을 내리면 fixed는 특정 위치에 그대로 고정 되어지고,
sticky는 특정 시점(지정한 위치)에서 고정되어진다.position: fixed, sticky
이해해버려라!