포지션 속성 볼 때마다 머리가 하얘져서요. absolute relative fixed sticky 이 네 개가 계속 섞여서 이해가 안 갑니다.
특히 absolute 줄 때 어떤 건 화면 기준으로 붙고 어떤 건 부모 기준으로 붙던데, 이게 언제 뭘 기준으로 잡히는 건지 모르겠어요. 부모에 relative 있으면 다르게 동작한다는 말은 들었는데 정확히 왜 그런지를 모르겠습니다.
.box { position: absolute; top: 0; right: 0; }
이렇게 오른쪽 위에 붙이려고 했는데, 어떤 페이지에선 부모 박스 오른쪽 위에 딱 붙고 어떤 데선 브라우저 화면 오른쪽 위로 튀어버려요. 똑같은 코드인데 다르게 나오니까 미치겠어요.
그리고 fixed랑 sticky도 헷갈립니다. 헤더 스크롤 따라다니게 만들 때 fixed 쓰라는 사람도 있고 sticky 쓰라는 사람도 있던데 둘이 뭐가 다른가요? 스크롤 내리면 둘 다 위에 붙어있는 것 같은데요.
네 개 각각 뭘 기준으로 위치가 잡히는지랑, 실무에서 언제 뭘 쓰는지 상황 예시로 좀 정리해주시면 정말 감사하겠습니다. 자꾸 감으로 이것저것 넣어보다가 되면 넘어가는 식이라 제대로 알고 싶어요.