Position

CSS position 은 문서에서 요소를 배치하는 방법을 지정해주는 프로퍼티이다. ✨

position 속성에는 static relative absolute fixed sticky 이러한 속성값들이 있다.

1. static

static 은 아무런 영향을 주지 않고 일반적인 문서 흐름에 따라 배치되는 속성값이며 position property의 default 값 이다.

2. relative

relative 는 그 자체 만으로는 아무런 변화가 생기지 않는다. 그래서 relative 가 입력된 요소는 static 처럼 문서 흐름에 따라 처음 문서에 있는 위치에 올려져있지만!
top right bottom left 의 프로퍼티를 지정해주면 각 속성의 값만큼 자기 자신을 기준으로 off-set 이 적용된다.

.yellow {
  position: relative;
  top: 40px;
  left: 10px;
}

3. absolute

앞에서 살펴본 static 과 relative 는 기존 문서 흐름을 유지시키며, relative 는 top, left, bottom, right 로 위치를 이동하더라도 원래의 자리는 여전히 공간을 차지하고 있어서 다른 요소들이 침범하지 않는다.
🤚🏻 하지만 absolute 는 요소를 일반적인 문서 흐름에서 제거하고 페이지 레이아웃 공간에도 배정되지 않는다. (즉, 다른 요소들이 absolute 된 요소의 자리를 메꾸게 된다.)
relative 는 자기 자신의 원래 위치를 기준으로 이동했다면 vs absolute 는 특정한 속성을 충족하는 부모(&조상) 중에서 가장 가까운 부모(&조상)을 기준으로 top right bottom left 로 이동한다.

🤔 그럼 어떤 상태의 부모를 기준으로 위치를 잡을까?
→ 바로 부모 중에 position 이 relative, fixed, absolute 중 하나라도 있으면 그 부모를 기준으로 잡는다!
💡 하지만 일반적으로 기준점으로 잡고 싶은 부모요소에 relative 속성을 부여한다. (이유 : ①relative 속성 만으로는 부모요소에서 변화가 생기지 않으니까. ②relative 속성값은 현재의 문서 흐름을 바꾸지 않으니까)

/*첫번째*/
.yellow {
  /*가장 가까운 부모가 body 인 경우에서 이렇게 브라우져의 제일 왼쪽, 위쪽을 기준으로 잡는다.*/
  position: absolute;
}

/*두번째*/
.yellow {
  position: absolute;
  top: 40px;
  left: 10px;
}

→ 가운데 박스가 postion: absolute 가 되니, 원래 세번째 자리에 있던 파란색박스가 사라진 노란색 박스 자리를 채워버렸다.

4. fixed

fixed 도 absolute 프로퍼티 처럼 일반적인 문서흐름에서 제거되고 페이지 레이아웃에서도 공간을 배정받지 않아 다른 요소들이 원래 있던 자리를 채워버린다.
absolute 는 속성이 relative, fixed, absolute 중 하나라도 있는 부모들 중 가장 가까운 부모를 기준으로 배치가 되었다면 vs fixed 는 브라우저 화면을 기준으로 배치가 된다. 그래서 top right bottom left 의 프로퍼티를 적용하면, 내가 보고있는 브라우저 화면의 네 모서리를 기준으로 각 속성값에 따라 off-set 이 된다.
→ 문서에서 스크롤을 내려도 상단에 고정되어있는 메뉴바들이 보통 fixed 가 적용된 경우이다.

• 이렇게 position :fixed 를 해주면 원래의 영역을 잃어버려 다른요소들이 공간을 채워버린다.
  → 그럼 네이게이션 바와 요소들이 겹쳐서 가려지기 때문에 다음의 방법으로 해결할 수 있다!
  

nav {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
}

• 네비게이션에 주었던 높이만큼 body 에 padding-top 을 주면 된다. (이 예시 일 경우에 body 태그에 넣어준거고, 만약 위치와 부모의 상황이 다르다면 그에 맞게 padding-top 을 넣어주면 된다.)
  

body {
  padding-top: 50px;
}

nav {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
}

5. sticky

sticky 는 요소를 일반적인 문서 흐름에 따라 배치하며, 가장 가깝게 있는 조상을 기준으로 하는데 그 조상은 스크롤이 되는 조상이다. 이것또한 함께 사용하는 프로퍼티들은 top right bottom left 이다. 부모와 함께 스크롤이 되어 따라 올라가다가 입력한 속성값의 위치에 도달했을 때 고정된다.

→ 유튜브에서 스크롤이 올라가다가 영상은 화면 상단에 고정되고 댓글만 계속 스크롤이 될 때 처럼 활용된다.
![]

.yellow {
  position: sticky;
  top: 50px;
}