Position

Position이란? | MDN

position은 element를 어떤 기준으로 위치시킬 것인지를 정할 수 있는 property이다. position의 타입에 따라 이 기준은 달라진다. 이 타입에는 static, relative, absolute, fixed, sticky가 있고, top, bottom, left, right을 함께 이용하면 각각의 "기준" 위치에서 얼마만큼 떨어져 있는 곳에 위치시킬 것인지를 최종적으로 결정할 수 있다. 따라서 top, bottom, left, right의 값을 지정하지 않으면, 아무런 일도 일어나지 않는다.

 

+) z-index | static을 제외하고 position에 값을 적용하면, 그 요소의 z 값이 설정된다(원래 위치에서 붕 뜨게 된다). z-index 값은 정수로 직접 설정할 수도 있고, 요소들이 겹쳐져 있을 때, 그 값이 더 큰 요소가 다른 요소를 덮어쓴 상태로 브라우저에 표기된다. 

static 

• 모든 요소는 position 속성을 가지고 있고, 기본값은 static이다.
• 요소가 normal document flow에 맞게 배치된다. 즉 element가 들어있는 부모 컨테이너 안에서 자연스럽게 배치가 된다는 뜻이다.
• top, bottom, left, right 속성에 값을 설정해도 아무런 변화가 일어나지 않는다.

relative | 상대적인 위치

• 기준 | 자기 자신이 원래 있어야 하는 위치(static일 때의 위치)
• 해당 요소는 부모 컨테이너에서 벗어나게 되지만, 원래 자신이 있던 위치를 기억하고 있다. 따라서 relative를 적용하지 않은 다른 요소들에는 아무런 영향을 끼치지 않는다.
• 자기 자신 뿐만 아니라, 부모 형제 요소 또한 이 요소가 원래 있던 위치를 기억하고 있다. 
• 원래 있던 위치에서 요소를 조금만 옮기고 싶을 때 이용한다. 

 

#two{ position: relative; top: 20px; left: 20px; }

absolute | 절대적인 위치

• 기준 | position의 value가 static이 아닌, 가장 가까운 부모 컨테이너를 기준으로 한다. 즉 원하는 조상 요소의 position을 static이 아닌 값으로, 주로 relative, 지정함으로써 개발자가 기준을 정할 수 있다.  
• 요소를 원래 맥락에서 완전히 빠져나오게 한 뒤 재배치하고 싶을 때 이용한다. 
• absolute 값을 적용한 요소는 float 속성을 적용한 요소와 비슷해 진다.
  • 부모 형제 요소가 이 요소를 알아차리지 못한다.
  • 반면 inline 요소도 이 요소를 알아차리지 못한다는 점에서 차이가 있다.
  • blocking을 못하는 block이 된다.
  • 부모 형제요소가 이 요소를 알아차리지 못하기 때문에, 즉 원래 위치해있던 컨테이너에서 완전히 빠져나가기 때문에, 그 빈자리를 채우기 위해 다른 요소들도 재배치된다

fixed | 고정된 위치

• 기준 | viewport 사이즈(현재 브라우저 창의 사이즈, 개발자도구 제외)를 기준으로 요소의 위치를 고정시킬 수 있다.
• absolute를 적용한 요소에게 일어나는 일이 동일하게 발생한다. 
  
  • 부모 형제 요소가 이 요소를 알아차리지 못한다.
  • inline 요소도 이 요소를 알아차리지 못한다.
  • blocking을 못하는 block이 된다.
  • 다른 형제 요소들이 재배치된다. 

sticky | relative + fixed

position: sticky;

 

can i use 사이트에서 확인해 보면, 다른 position 속성 값들과 비교했을 때 sticky는 지원하지 않는 브라우저가 많다(그래도 거의 90% 이상에서 지원).

 

• 기준 | 지정된 임계값(specified threshold)보다 작아지기 이전 까지는 relative로 배치되고, 임계값보다 작아지면 viewport를 기준으로 하는 fixed로 배치된다. 
• relative처럼 다른 요소의 배치에는 아무런 영향을 끼치지 않는다. 
• position sticky를 적용할 요소의 부모 요소는 스크롤링 메커니즘을 가지고 있어야 한다.
• sticky container 안에 자식 요소가 sticky item 하나 뿐일 때에는 sticky가 정상적으로 동작하지 않는다.  
  • 부모 요소에는 over-flow와 관련된 속성을 적용할 수 없다.  
  • how to fix sticky? 
  • sticky 원리