오늘은 어이없는 css 삽질이 있었다...
바로바로 'position:fixed의 가출 실패사건'
position이 absolute 일 때는 position static을 제외한 속성이 있는 부모 element에 따라서 top, bottom, left, right를 설정할 수 있다.
하지만? position fixed는 부모의 속박에 얽매이지 않는다.
부모가 어디에서 뭘하고 있든 자기가 가고싶은 위치로 갈수있다는 것이다...
그런데... 그렇지 않은 사건이 발생했다...
이렇게 position fixed와 z-index를 어어엄청나게 많이 주어도 ...
부모의 element에 속박되어있는 것이었다.....
제발!!! 부모의 품을 벗어나라고!!!
이것저것 해보다가 알게되었는데…
부모에 transform : translatex(-50%) 준것이 화근이었다…
이유를 지피티에게 물어보았다
정리하면
요소들이 쌓이는 기준 좌표계를 stacking context라고 하는데 transform을 쓰면 해당 요소가 새로운 stacking context를 만들어서
그 자식의 position: fixed 기준이 바뀌는 것이었다…
📌fixed는 “viewport를 기준으로 하되, stacking context가 없을 때만!”
📌 transform, filter, perspective, contain, will-change 등 → 모두 stacking context 만듦
에혀… 이번엔 transform 말고 다르게 할수있어서 해결하긴 했지만 담에 도저히 부모 element에 있는 transform, filter, perspective같은거 없앨수없는 상황이면 어떻게 해야할런지… 사실 transform 쓰는 부모 밖으로 빼면 그만이긴 하지만
컴포넌트화 하다보니 쉽지않아진다.
그렇다고 Prop를 전달전달전달 이러고 싶진않고..
쉽지않다 ㅠㅠ
