Sticky를 배우는 도중에 문득 들엇다.
그럼 Fixed랑은 차이는 뭐야?
왼손엔 번역기 오른손엔 구글링. 구글링을 해봤다
해당 링크와 mdn에서 나온 설명을 보고 내 나름의 이해한대로 정리해봤다
(뭐그리 대단한 정리는 아니다; 간단히만ㅎㅎ)
Fixed
mdn에서 Fixed는 항상 새로운 쌓임맥락을 만들어 낸다고한다.
이것은 Sticky와 공통점이다 ! !
내 나름의 해석은 항상 요소가 붕 뜬다는 소리로 이해했다
항상 새로운 쌓임맥락을 만들기때문에 문서의 흐름을 방해하지 않는다
역시 항상 붕뜨기때문에 무슨 엘리먼트가 있든 항~~~상붕떠서 자기자리를 유지 한다. 라고 이해했다
하지만 Sticky는 항상 쌓임맥락을 만들지만. 문서의 흐름에 개입한다. 즉 다른 엘리먼트의 공간을 사용한다.
부모요소가 스크롤되있는지 여부와 상관없이 항상 뷰포트의 초기 컨테이닝블록을 기준으로 배치된다
position fixed가 들어간 요소의 부모요소가.
스크롤되있는지 여부상관없이.
항상 뷰포트의 초기 컨테이닝블록을 기준으로 배치.
말그대로 이해가 됬다. 하지만 예외가 있는듯 했는데
fixed요소의 조상중 하나가 transform perpective filter속성중 하나라도 none면 해당 요소를 기준으로 배치된다.
이해는 못했지만 조건이 충족하면 초기컨테이닝블록이 아닌 해당요소를 기준으로 fixed된다. 라고 이해했다 ㅎㅎ
하지만 Sticky는 sticky의 부모요소가 뷰포트에서 스크롤되면 그재서야 뷰포트를 떠난다. 즉 sticky를주고 top 등 position을 줬을텐데.
부모요소가 스크롤되면 뷰포트를 떠나서 붕떠서 그 포지션을 유지한다.
그리고 부모요소가 스크롤에서 벗어나면 position이 해제된다
결론은 무조건고정 , 조건부고정의 차이같다.
sticky는 부모요소가 뷰포트에 스크롤 되는지, 벗어낫는지에 영향을 받지만 fixed는 아니니까 ㅎㅎ
아니라면 항상 키엘리니급 태클 부탁한다
