normal flow = 웹 사이트의 기본 틀.
position :
- 기본 틀을 부숨.
- static :
- position의 기본값
- 원래 있어야 할 위치에 배치
- 일반적인 글의 흐름을 따름
- 위치의 기준.
- top bottom right left를 이용함.
- 모든 요소는 기본적으로 static임.
- relative :
- 상대적임.
- 원래 있어야할 위치를 기준.
- 원래 있던 공간은 그대로 비워둠.
- absolute :
- 가장 가까운 조상요소를 기준으로.
- relative 가 있는 곳을 기준삼음.
- 기존의 배치를 벗어남. = 이후에 나오는 div가 자리를 차지함.
- top,bottm,right,left를 전부 0px로 설정하거나,
inset 0px;을 하면 조상요소를 덮어버림.
- fixed :
- 기준이 브라우저 화면임.
- 고정됐다 라는 뜻으로, 화면을 이동해도 고정됨.
- 원래 있던 자리는 다음 div가 차지.
- 스크롤을 계속 해도 제자리에 있음.
- 네비게이션이랑 내용이 겹쳐서 안보일 수 있음
-> margin을 이용해서 네비게이션 바의 높이만큼 너비를 지정해줘서 네비게이션이 따라오게 만들 수 있다.