[TIL] position이란?

CSS에서 position 속성에 대하여 알아보자

position은 화면상에서 어떤 요소를 어디에 줄지 결정할수 있도록 해주는 속성이다.

• position의 종류

  • static
  • relative
  • fixed
  • absolute

• static

  • static 속성은 defult값으로 적용되어있는 속성이다.
  • 요소를 위에서부터 아래쪽으로 순서대로 배열을 시켜주는 속성이다.
  • 위의 4가지 속성중 유일하게 top, bottom, left, right 속성을 무시한다.

• relative

  • relative 속성은 요소가 원래 포지션에서 상대적인 포지션을 가질수 있도록 해주는 속성이다.
  • top, bottom, left, right 속성을 사용하여 원래 위치*에서 상대적인 위치를 지정해줄수 있다.
  • 원래 위치* -> 아무런 속성이 없으면, 즉 static 속성일 때를 의미한다.
  • 다른 요소가 relative속성으로 인해 생긴 빈 공간에는 위치할수 없다.

• fixed

  • fixed 속성은 화면에 보이는 위치가 기준이 되는 속성이다.
  • 한번 위치가 결정되면 화면에서 스크롤이 생겨도 사라지지 않고 처음 위치 그대로 고정적으로 위치한다
  • relative처럼 top, bottom, left, right 속성을 적용할수 있지만 다른점은 빈공간을 만들지 않는다는 점이다.
  • 빈공간을 만들지 않기 때문에 다른 요소들과 겹칠수 있다.

• absolute

  • absolute 속성은 static속성을 제외한 부모의 위치에 상대적으로 위치한다.
  • 만약 부모가 없다면 body를 기준으로 위치하게 된다.

위 설명들을 시각적으로 보기위한 사이트는 아래 사이트가 깔끔하게 나와있다.
https://creamilk88.tistory.com/197