(CSS) fixed와 sticky 차이, 화면에 요소 고정하기

 

 

css에서 특정 요소를 화면에 고정시키고자 한다면

 

position: fixed; 또는 position: sticky;를 활용하면 된다. 

 

그런데 둘의 차이점이 궁금해져서 찾아보게 되었다. 

 

 

 

fixed

부모의 위치와 상관없이 사용하면 해당 요소는 화면에 고정된다. 

 

아래 예시를 보면 부모 div(핑크)를 지나서 스크롤을 해도 그에 영향을 받지 않고 계속 고정되는 모습을 볼 수 있다. 

 

 

 

 

 

sticky

fixed와 거의 비슷하게 동작하나, 부모의 영향을 받는 것이 차이점이다. 

 

부모(핑크)의 내에서는 위치가 고정되지만, 스크롤이 부모(핑크)를 지나가면 고정이 멈추는 것을 확인할 수 있다.