CSS position 속성 정리

위치를 설정하는 position 속성에 대해 정리해보자

  div {
    position: static;
  }
  
  div {
    position: relative;
  }
  
  div {
    position: absolute;
  }
  
  div {
    position: fixed;
  }

 

 

 static 

position 속성의 기본값

position이 static일때 left, right, top, bottom 은 비활성화된다.

 

 relative 

부모태그를 기준으로한

원래 자기가 있었던 위치를 기준으로해서 

left, right, top, bottom 가 적용된다

 

 absolute 

부모태그를 기준으로해서

left, right, top, bottom 값이 적용된다

단 부모의 position이 static이 아닐 경우에만 => left, right, top, bottom 기준을 부모로 잡는다

부모가 static일시, static이 아닌 그 위의 부모를 찾아 기준으로 삼는다

 

 fixed 

최상위에 있는 태그를 기준으로 잡고

left, right, top, bottom 위치를 잡는다

이때, 스크롤에도 상관없이 잡은 위치를 고수함

 

 sticky 

원래 자기가 있던 위치를 기준으로 자리잡으나

스크롤을 내려도 움직이지않고 그대로 고정됨