Files

T

Antigravity Agent 1cfd3bbb56 docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고,
Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.

2026-07-05 00:10:59 +09:00

3.2 KiB

Raw Blame History

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

title

HOWTO CSS Sticky Element

🎯 한 줄 통찰 (One-line insight)

position: sticky is a HYBRID of the two positioning models this cookbook has already covered separately — it behaves like position: relative (occupying its normal place in the document flow) until the scroll position reaches the specified offset (top: 0), at which point it switches to behave like position: fixed (pinned to the viewport) — meaning it's not a third independent positioning scheme but a scroll-triggered TOGGLE between the two schemes already used in [[HOWTO CSS Fixed Menu]] and ordinary flow layout. [S1]

🧠 핵심 개념 (Core concepts)

position: sticky — toggles between relative and fixed behavior depending on scroll position. [S1]
Requires an offset property — at least one of top, right, bottom, or left MUST be specified, or sticky positioning does nothing. [S1]
Browser support caveat — explicitly noted to NOT work in Internet Explorer or Edge 15 and earlier. [S1]

📖 세부 내용 (Details)

Minimal example: div.sticky { position: sticky; top: 0; }. [S1]

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

relative와 fixed 사이를 스크롤에 따라 토글하는 하이브리드: [[HOWTO CSS Fixed Menu]]에서 확인된 순수 position: fixed와 달리, sticky는 스크롤 위치가 지정된 오프셋에 도달하기 전에는 일반 흐름(relative)을 따르다가 그 지점부터 fixed처럼 고정된다는 점이 두 방식의 결합으로 확인됨. [S1]

🛠️ 적용 사례 (Applied in summary)

현재 발견된 실제 적용 사례가 없습니다 — top:0 오프셋을 지정한 최소 sticky 예제가 원문에서 제시됨. [S1]

💻 코드 패턴 (Code patterns)

Sticky positioning — toggles between relative and fixed on scroll (CSS):

div.sticky {
  position: sticky;
  top: 0; /* at least one offset is required */
}

✅ 검증 상태 및 신뢰도

상태: draft
검증 단계: conceptual
출처 신뢰도: B (W3Schools — widely used educational reference)
신뢰 점수: 0.84
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: W3Schools HOW TO
관련 개념: HOWTO CSS Fixed Menu, HOWTO CSS Sticky Social Bar, HOWTO JS Navbar Sticky
참조 맥락: CSS Layout & Positioning 섹션.

📚 출처 (Sources)

[S1] W3Schools — How To - Sticky Element — https://www.w3schools.com/howto/howto_css_sticky_element.asp

📝 변경 이력 (Change history)

2026-07-04: Initial draft synthesized from the W3Schools "How To - Sticky Element" recipe (Astra wiki-curation, P-Reinforce v3.1 format).

3.2 KiB Raw Blame History