static, relative, absolute, fixed, sticky의 기준점을 이해합니다.
relative는 원래 자리를 유지하며 absolute 자식의 기준이 될 수 있습니다. absolute는 일반 흐름에서 빠지고 fixed는 viewport, sticky는 스크롤 컨테이너의 임계 위치를 기준으로 붙습니다.
이번 예제의 출발점은 position: absolute; inset: 12px;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 target의 기준을 top/right에서 bottom/left로 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
absolute로 전체 레이아웃을 맞추면 콘텐츠 길이와 화면 크기가 바뀔 때 겹치기 쉽습니다.
직접 바꿔보세요target의 기준을 top/right에서 bottom/left로 바꿔보세요.