부모 기준 없음
배지는 카드 오른쪽 위를 의도했습니다.
실패 배지기준점을 바꾸면 위치가 달라집니다
상단 안내는 fixed입니다. 문서에는 같은 높이의 공간을 확보했습니다.
1. relative: 원래 자리는 유지
AB · 아래로 8pxC
B를 이동해도 A와 C의 배치 기준은 그대로입니다.
2. absolute: 기준 부모 비교
실패 실험 · 배지가 바깥 실험판을 기준으로 배치됩니다.
수정 · 카드에 position: relative
부모 기준 있음
배지 공간도 카드 안에 확보합니다.
수정 배지3. sticky: 이 영역 안에서 스크롤
실패 제목은 top이 없어 함께 사라집니다. 수정 제목은 위에 붙습니다. 아래 영역에 초점을 두고 방향키로도 스크롤할 수 있습니다.
실패 · top 없음
수정 · top: 0
스크롤 시작: 수정 제목이 영역 상단에 도착하는 순간을 보세요.
긴 본문 구간입니다. 스크롤해도 제목은 이 스크롤 영역을 기준으로 붙습니다.
본문 끝: sticky는 자신의 컨테이너 경계를 무한히 벗어나지 않습니다.
4. fixed: 문서 스크롤로 확인
이 문단까지 문서 전체를 스크롤해 보세요. 상단 링크는 화면 위에 남습니다. 작은 화면에서도 안내가 본문 첫 줄을 가리지 않는지 확인하세요.