position: absolute, relative, fixed, sticky

오른쪽옮길땐 left 속성 

left v right =>left 가 우선  같이썼을떄 
<같이썼을때 >
bottom vs top => top이 우선 

css 엘리먼트는 기본값 =? position : static;
오프셋값 무시함 -

==
absolute -> 링크끈켜서 자기자신의 컨텐트만하게만 사이즈가 작아짐 
-> 부모중에 position static 이 아닌곳에서부터 시작한다. 


fixed도 width height 정해줘야함 부모가 없어지기떄문에 컨텐츠의 크기가됨 

 

---

position sticky! - 순수 CSS 상단고정 네비게이션

 

첫 화면에서는 네비게이션 메뉴가 화면 중간에 존재하다가, 스크롤을 내리면 화면 최상단에 딱 달라붙어 따라오는 경우를 보셨을 겁니다. 

 

위 기능을 구현하려면 자바스크립트로 스크롤할때마다 해당 엘리먼트의 offset 좌표와 스크롤위치를 비교합니다. 

어려운 것은 아니지만 굉장히 거추장스러운 작업인데요.

 

CSS의 position 에 sticky 라는 것을 사용하면 단 2줄로 구현할 수 있습니다. 

자바스크립트를 단 한 줄도 쓰지 않구요.

position: sticky; 
top: 0;