Sticky Position
고정 위치
CSS 스티키 위치는 일반 상대 위치처럼 시작합니다. 페이지가 스크롤되면 박스가 설정된 가장자리에 머물 수 있지만, 그 컨테이닝 블록 안에서만 가능합니다.
다른 예시
긴 테이블이 헤더가 top: 0인 단일 스크롤 영역 안에 있습니다. 헤더는 테이블이 화면 내에 있는 동안에만 상단에 머물러 있습니다. 설정된 경계가 없거나 잘못된 스크롤 컨테이너를 사용하면 스티키 위치 지정이 작동하지 않을 수 있습니다.
주요 부분
- 01스크롤 컨테이너
- 02자동 삽입 아님
- 03포함-블록 경계
사용할 때
일반 레이아웃의 항목이 가장 가까운 스크롤 영역 안에서 계속 보이도록 해야 할 때 이 용어를 사용하세요.
다음 경우에는 사용하지 마세요
콘텐츠를 가리는 붙이는 아이템, 불분명하게 쌓이는 아이템, 작은 화면의 대부분을 차지하는 아이템은 사용하지 마세요.
코드에서 사용된 이름
position: sticky; inset-block-start: 0 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 고정 위치 (Sticky Position)。 User context：긴 테이블이 헤더가 top: 0인 단일 스크롤 영역 안에 있습니다. 헤더는 테이블이 화면 내에 있는 동안에만 상단에 머물러 있습니다. 설정된 경계가 없거나 잘못된 스크롤 컨테이너를 사용하면 스티키 위치 지정이 작동하지 않을 수 있습니다. Design concept to apply：고정 위치 (Sticky Position)。 Why it fits：일반 레이아웃의 항목이 가장 가까운 스크롤 영역 안에서 계속 보이도록 해야 할 때 이 용어를 사용하세요. Do not use it when：콘텐츠를 가리는 붙이는 아이템, 불분명하게 쌓이는 아이템, 작은 화면의 대부분을 차지하는 아이템은 사용하지 마세요. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 고정 위치 (Sticky Position) is used now. Definition: CSS 스티키 위치는 일반 상대 위치처럼 시작합니다. 페이지가 스크롤되면 박스가 설정된 가장자리에 머물 수 있지만, 그 컨테이닝 블록 안에서만 가능합니다. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.