[8주차] 13. 속성, 요소의 위치를 내가 원하는 곳에 지정하는 position

Position 속성이 'static'일 때(디폴트)

static방식이 디폴트이며, 내가 아무것도 지정해주지 않았을 때 요소들이 배치되는 방식이다.

요소들이 겹치지 않고 알아서 배치되는게 특징이다.

주의해야할 점으로 position 속성이 static 일 때는

relative 방식에서 사용하는 top, left, bottom, right 속성을 아무리 줘도 무시된다.

Position 속성이 'relative' 또는 'absolute'일 때

relative, absolute는 비슷한데,

둘 다 top, left, bottom, right 속성을 주어 기준점으로부터 얼마나 떨어진 자리에서부터 요소가 그려질지 지정할 수 있다.

또한, 이 두 가지 방식을 사용하게 되면 요소들을 겹쳐지게 띄우는게 가능해진다. 

 

다른점으로는

 

relative 방식에서 준 top, left, bottom, right 속성은

원래 static일 때 배치되어야 하는 자리의 왼쪽 꼭지점이 기준점으로 되어 적용되며

 

absolute 방식에서 준 top, left, bottom, right 속성은

부모 요소의 왼쪽 꼭지점이 기준점이 되어 적용된다.(추가 공부가 필요한데 정확히는 부모 요소가 아닐 수 있음)

 

하나 더, 다른점으로

 

relative 방식은 static 방식일 때 이 요소가 원래 배치되어야 하는 공간은 그대로 비둬둔 상태에서 이 요소를 움직이게 되며

 

absolute 방식은 static 상태의 배치 상태에서 이 요소가 사라진 것처럼 이 요소를 움직이게 되어 생긴 공백은 다른 요소가 당겨져 채워진다는 점이 다르다.

 

위에서 말하는게 이해가 안된다면 다음 링크를 참고하자.

https://developer.mozilla.org/ko/docs/Web/CSS/position

선택자 생략  {
  position: relative; /* 혹은 absolute*/
  top: 28px;
  left: 48px;
}

Position 속성이 'absolute'일 때

* 부모의 왼쪽 꼭지점을 기준으로 정렬함. 단, 부모의 position 은 relative이어야 함.

선택자 생략  {
  position: absolute;
  top: 28px;   /* % 로 줘도됨 */
  left: 48px;
}

Position 속성이 'fixed'일 때

스크롤을 올리고 내릴 때 해당 요소는 스크롤과 분리된 상태로 특정 위치에 고정되어 있게 할 수 있는 속성이다.

relative, absolute일 때와 마찬가지로 요소들을 겹쳐지게 띄우는 것도 가능하고, top, left, bottom, right 속성을 지정할 수 있다.

선택자 생략  {
  position: fixed;
  top: 28px;
  left: 48px;
}