[CSS] CSS - Position의 속성들과 각각의 특징

2. CSS - position의 속성들과 각각의 특징 설명

먼저 웹사이트에서 요소의 레이아웃을 설정하는 대표적인 속성은 position 속성이다.
이 position 속성을 사용하여 요소의 위치를 원하는 곳으로 이동할 수 있고, 이로 인해 더 다양하고 화려한 레이아웃을 구현할 수 있게 되는 것이다.

각 position 속성에 대하여 알아보면

 

 - static : 처음 요소가 갖고 있는 기본값의 속성이다
 Nomal-flow 에 따라 배치되며 offset 값이 적용되지 않는다.

 

  - absolute : 부모 요소의 위치를 기준으로 offset에 따라 배치된다.
  부모가 position 값_{(static제외)}을 가지면 offset 값의 시작점이 된다.
  부모의 position 값이 `static`인 경우 조상의 position 값이 `static`이 아닐 때까지 거슬러 올라가 기준으로 삼는다.

   - fixed : 뷰포트_{(브라우저의 창)}를 기준으로 offset에 따라 배치된다.
   즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 따라 정보가 나타난다.
   부모의 위치에 영향을 받지 않는다.

   - relative : 자신이 원래 있어야 할 위치를 기준으로 offset에 따라 배치된다.
   부모의 position 속성에 영향을 받지 않는다.
   Nomal-flow의 흐름에 따른다.
   주변 요소에 영향을 주지 않으면서 offset 값으로 이동한다.

   - sticky : 요소를 스크롤에 따라오게 만든다.
   스크롤이 지정된 위치에 도달할 때까지 요소는 일반적인 흐름대로 이동한다.
   스크롤의 좌표가 지정된 위치에 도달하면 요소가 지정된 위치에 고정된다.
   지정된 위치 이하로 스크롤 해도 해당 위치에 고정되어 유지된다.
   sticky` 요소를 사용하기 위해서는 position이 선언된 요소에 위치를 지정하여 주어야 한다. `top, botton, right, left`
   부모 요소에 overflow 속성이 적용되어 있으면 동작하지 않는다.
   부모 요소의 높이가 설정되어 있지 않은 경우에 동작하지 않는다.