Position정리 relative / absolute / fixed / sticky
Sticky예제
( 스크롤 하기전 sticky요소가 relative하게 위치한 모습 )
( 스크롤 후 sticky요소가 viewport기준으로 top:10px부분 부터 fixed하게 위치한 모습 )
Position 설명
1.static
-
position 속성을 지정하지 않으면, 기본값으로 static이 설정됩니다.
이는 웹페이지에서 그 요소가 자연스럽게 있어야 할 곳에 그대로 있게 해줍니다 (원래 위치)
-
top, left, bottom, right 속성 값이 적용되지 않습니다.
2. relative
-
relative로 설정된 요소는, 단독으로 사용될때는 static과 마찬가지로 원래 위치에 위치합니다
그러나 top, left, bottom, right 속성 값을 사용하여, 해당 요소를 원래 위치로 부터 이동시키는것이 가능합니다
( 보통 현재 위치로 부터 top, left, bottom, right등을 사용해서 요소를 움직이고 싶을때 사용한다 : 평소 자주 사용하는 패턴 )
( 또한 z-index는 static일때 사용할수없기때문에 relative를 설정해서 사용하기도 한다 )
3. absolute
-
absolute로 설정된 요소의 위치는 가장 가까운 position이 relative, absolute, 또는 fixed로 설정된 상위 요소를 기준으로 위치합니다.
그런 상위 요소가 없다면, 문서의 요소를 기준으로 합니다.
-
top, left, bottom, right 속성 값을 사용하여, 상위 요소 또는 를 기준으로 위치를 조정할 수 있습니다.
4. fixed
-
fixed로 설정된 요소는 뷰포트를 기준으로 위치합니다.
이는 스크롤을 해도 해당 요소가 고정된 위치에 있음을 의미합니다.
-
top, left, bottom, right 속성 값을 사용할 수 있습니다.
5. sticky
-
sticky로 설정된 요소는 기본적으로 relative와 같이 동작하지만, 스크롤 위치가 특정 임계점에 도달하면 뷰포트에 대해 fixed처럼 고정됩니다.
이 동작은 top, left, bottom, right 중 적어도 하나의 값을 지정했을 때 유효합니다.
-
( 즉 평소에는 relative로 동작하다가 해당 요소가 viewport의 top, left, bottom, right에 일치했을때 fixed로 동작함 )
참고한 사이트