CSS position 알아보기

Position?

CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다.

position: static

• position속성을 별도로 지정해주지 않으면 기본값인 static이 적용되며, HTMl문서 상에서 원래 있어야하는 위치에 배치
  -> 즉 작성된 순서 그대로 브라우저 화면에 표시가 된다는 뜻

position: relative

• position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있고, 원래 위치를 기준으로 상대적으로 배치해준다.
  -> 원래 위치를 기준으로 상(top), 하(bottom), 좌(left), 우(right)로 얼마나 떨어지게 할지를 지정

position: absolute

• position 속성을 absolute로 지정하면 단어의 의미처럼 절대적인 위치에 배치하는 것이 아니다.
• DOM트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소의 배치 기준으로 상, 하 , 좌, 우 로 얼마나 떨어지게 할지 지정할 수 있다.
  -> relative는 자신의 원래 위치를 기준으로, absolute는 속성이 static이 아닌 첫번째 상위 요소를 기준으로 얼마나 떨어지게 할지 지정. : 만약 static이 아닌 요소가 없다면 가 배치 기준이 됨.

position: fixed

• position fixed로 지정하면 요소를 항상 고정된(fixed)위치에 배치할 수 있다.
• 그 이유는 fixed의 속성갑의 배치 기준이 본인 혹은 부모가 아닌, viewport 즉 보고있는 브라우저의 전체화면 이기 때문이다.
  -> 현재 보고있는 전체 화면을 기준으로 상하좌우 배치 가능.

position : sticky

• sticky 속성은 비교적 최근에 추가된 속성값.

• 브라으저 화면을 스크롤링할 때 효과가 나타남

• top, bottom, right, legt의 속성중 하나는 설정해주어야 하며,
  설정한 위치에 도달하기 전까지는 static, 도달 이후에는 fixed처럼 행동하게 된다.
  -> 유저의 스크롤로 지정해준 위치에 도달하면 그 이후 fixed처럼 행동하는 속성

  ---

  position 에는 static, relatice, absolute, fixed, sticky등이 있고, position값을 별도로 지정하지 않았을때는 static값을 지닌다.

  position:static 은 요소가 html상 원래 있어야할 위치에 있는것이고, relative는 본인의 원래 위치를 기준으로 상하 좌우 얼마나 떨어트릴 것인가, absolute는 본인의 상위 태그중 position속성이 static이 아닌 첫번째 요소를 기준으로 얼마나 떨어트릴 것인가, fixed는 현재의 viewport를 기준으로 상하좌우 어디에 배치할 것인가, sticky는 유저의 스크롤과 같은 행위로 지정한 위치에 도달했을때 fixed와 같은 효과를 낸다.