[CSS] position 속성과 사용법 총정리

🎯 2차원과 3차원을 결정짓는 요소 :: position

1차원은 선의 세계, 2차원은 평면의 세계, 3차원은 공간의 세계

• 부모 자식 지간에 발생하는 마진 병합 현상 유무 (2차원 O, 3차원 X)
• top, left, right, bottom 사용할 수 있는지 (2차원 X, 3차원 O)
• 자식의 높이값이 부모의 높이값에 영향을 주는지 유무 (2차원 O, 3차원 X)

 

📝 position 속성

• position: static : 2차원 영역, 기본값, top, right, bottom, left 속성은 적용되지 않는다.
• position: relative : 2, 3차원 영역, 상대적인 위치에 배치
  • 위치는 top, right, bottom, left 속성에 의해 지정
• position: absolute : 3차원 영역, 절대적인 위치에 배치
  • 위치는 top, right, bottom, left 속성에 의해 지정
  • 부모의 position상태에 따라서 기준점이 달라진다.
  • 부모를 찾아 올라가면서 아무것도 설정되어 있지 않으면 브라우저 왼쪽 최상단을 기준으로 좌표가 설정
  • 부모에 position이 relative면 부모가 좌표의 기준점으로 설정된다.

• position: fixed : 3차원 영역, 고정적인 위치에 배치
  • top, left, right, bottom을 사용하면 브라우저 왼쪽 최상단을 기준으 좌표 기준점이 설정된다.
  • 브라우저 왼쪽 최상단을 기준으로 좌표가 설정된다.
  • fixed는 고정되기 때문에 쇼핑몰 배너를 고정시킬 때 많이 사용한다.
• position: sticky : 3차원 영역
  • 평소는 static 상태와 같이 동작하다가 지정한 스크롤 위치에 도달했을 때 fixed 상태로 동작.
  • 부모 요소를 기준으로 움직인다. 따라서 부모 컨테이너가 반드시 존재해야 한다.
  • top, right, bottom, left 속성이 필수

 

📌 참고

• Absolute Positioning Inside Relative Positioning
• position - 생활코딩
• CSS { position: sticky }