position 속성 (static, relative, absolute, fixed, sticky)

position

• 글의 흐름에서 벗어나서 요소를 자유롭게 배치할때 쓰는 속성
• 기본값은 static
  • static 인 경우 원래 있어야 할 위치(=글의 흐름에 따라)에 배치된다
• top, right, bottom, left 속성 사용
  - 값이 커질수록 안쪽 방향
  - 음수값은 바깥쪽 방향
  - 네 방향 값이 모두 같으면 → inset 속성 사용

relative

• 요소의 원래 위치를 기준으로 배치
• 요소의 원래 자리는 그대로 차지하고 있음
  

absolute

• 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치
  • 포지셔닝이 되었다는건 static 이 아니라 position 속성을 지정했다는 의미
• 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않음
• 부모 태그에 position 을 갖고 있는 태그가 없을 땐? -> 가장 최상위라고 볼 수 있는 body 태그 기준으로 absolute 적용
  

.red {
  position: relative;
  top: 0;
  left: 10px;
}

.blue {
  position: absolute;
  right: 10px;
  bottom: 15px;
}

red가 relative로 지정되어서 blue 는 red 기준으로 배치

fixed

• 브라우저 화면을 기준으로 고정된 배치
• 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않음
  그래서 네비게이션 만들때 겹치지 않도록 아래 메인 요소들에 마진 넣어주기도 함

sticky

• 원래 위치에 배치되어 있다가 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치됨
• 기본적으로는 static 처럼 배치됨 - 요소의 원래 자리 차지