css에서 position 속성을 종종 사용하게 되는데, 정확히 정리되지 않은 채로 쓰는 것 같아 공식 문서 를 참고하여 정리해보았다.

position이란?

position은 이름에서 알 수 있듯이 element를 배치하는 방법을 지정해주는 속성 이라고 한다.

• static , relative , absolute , fixed , sticky 의 5가지가 있다.

1. static

• default 값

  명시되어 있지 않을 경우 position : static; 으로 적용됨

• 문서의 흐름에 따라 element 배치
• top , right , bottom , left , z-index 속성에 영향을 받지 않음

2. relative

• 문서의 흐름에 따라 element 배치

• top , right , bottom , left 를 주면 static이었을 때의 위치에서 주어진 값만큼 이동한다.

  .top {
  	position: relative;
  	top: 10px;
  }

  위의 경우 top을 10px만큼 줬기 때문에 기존 위치에서 아래로 10px만큼 내려간다.

3. absolute

• 일반적인 문서 흐름에서 element를 제거
• 요소의 공간도 배정하지 않음

• 가장 가까운 부모 위치 지정 요소 에 대해 상대적으로 배치

  위치 지정 요소 : static 이 아닌 모든 요소 ( relative , absolute , fixed , sticky )

• 부모 중에 static 이 아닌 요소가 없다면 최상위 태그에 상대적으로 배치함

  .right {
  	position: absolute;
  	right: 10px;
  }

  위의 경우,

  position: static; 이 아닌 parent 요소가 있으면 : parent에서 왼쪽으로 10px만큼 떨어짐

  없을 경우 : 최상위 태그인 에서 왼쪽으로 10px만큼 떨어짐

4. fixed

• element를 특정 위치에 고정함
• top , right , bottom , left 의 값으로 위치를 지정함

5. sticky

• 스크롤이 특정 위치에 왔을 때 요소를 지나치지 않고 고정해주는 역할을 함
• top , right , bottom , left 의 값으로 위치를 지정함
• static하게 문서에 위치해있다가 스크롤에 따라 fixed처럼 동작하게 함

• 상단에 공간을 두고 위치에 있던 네비게이션 바가 스크롤 시에 상단에 붙게 되는 경우 사용할 수 있음

  .nav-bar {
  	position: sticky;
  	top: 0;
  }

position 속성 5가지(static , relative , absolute , fixed , sticky)에 대해서 정리해봤다.

position 속성은 z-index의 영향을 받는데, 다음엔 z-index에 대해 정리해봐야겠다.