2nd/10_Wiki/Topic_CSS/CSS_Position_Sticky.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-position-sticky	CSS Position Sticky	Frontend	draft	conceptual		position sticky sticky positioning sticky header sticky sidebar CSS sticky sticky element		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools position layout	https://www.w3schools.com/css/css_positioning_sticky.asp

CSS Position Sticky

🎯 한 줄 통찰 (One-line insight)

position: sticky makes an element toggle between relative and fixed positioning depending on the scroll position — it acts relative until a scroll threshold is reached, then sticks like a fixed element. [S1]

🧠 핵심 개념 (Core concepts)

• toggle behavior — position: sticky toggles between a relative and fixed position depending on the scroll position. [S1]
• initial state — it initially behaves like relative positioning. [S1]
• after threshold — once a scroll threshold is reached, it behaves like fixed positioning. [S1]
• offset is required — you must specify at least one of the top, right, bottom, or left properties for sticky positioning to work. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Scroll-pinned region — set position: sticky plus a single offset (e.g. top: 0) so a region sticks to that edge once scrolling reaches it. [S1]
• Persistent navigation/headers — apply sticky positioning to headers, sidebars, or table headers so they stay visible while their container scrolls. [S1]

📖 세부 내용 (Details)

Main concept [S1] position: sticky; creates an element that toggles between a relative and fixed position, depending on the scroll position. It initially behaves like relative positioning until a scroll threshold is reached, then behaves like fixed positioning.

Key requirement [S1] You must specify at least one of the top, right, bottom or left properties for sticky positioning to work.

div.sticky {
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Common use cases [S1]

• Sticky headers (navigation bars)
• Sticky sidebars (side content during scrolling)
• Sticky table headers (remaining visible in long tables)

Sticky vs fixed comparison [S1] The page includes a feature comparison between sticky and fixed positioning, covering initial behavior, space allocation, scroll behavior, and container boundaries. The exact cell contents of that comparison table were not provided verbatim in the fetched source — Not found in source.

CSS Positioning Properties Reference [S1] The page lists positioning-related properties including bottom, clip, left, position, right, and top with their descriptions.

🛠️ 적용 사례 (Applied in summary)

The page's own applied example is div.sticky, a region that sticks to the top edge (top: 0) once scrolling reaches it. Listed real-world uses are sticky headers, sticky sidebars, and sticky table headers. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Stick a region to the top edge on scroll (language: CSS):

div.sticky {
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• sticky — starts as relative (occupies its place in flow) and only switches to fixed-like behavior after a scroll threshold; bounded by its container. Requires at least one offset. Choose for elements that should scroll normally and then pin. [S1]
• fixed — pinned to the viewport from the start, independent of scroll position. The page presents a comparison across initial behavior, space allocation, scroll behavior, and container boundaries, but the verbatim table cells were Not found in source. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.88
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Position Fixed and Absolute, CSS Position Offsets, CSS Z-index
• 참조 맥락: Referenced when an element should scroll with the page and then pin to an edge — sticky headers, sidebars, and table headers.

📚 출처 (Sources)

• [S1] W3Schools — CSS Position Sticky — https://www.w3schools.com/css/css_positioning_sticky.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Position Sticky" page (Astra wiki-curation, P-Reinforce v3.1 format).