docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: css-position-sticky
|
||||
title: "CSS Position Sticky"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["position sticky", "sticky positioning", "sticky header", "sticky sidebar", "CSS sticky", "sticky element"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["css", "web", "frontend", "w3schools", "position", "layout"]
|
||||
raw_sources: ["https://www.w3schools.com/css/css_positioning_sticky.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[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.
|
||||
|
||||
```css
|
||||
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):
|
||||
```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).
|
||||
Reference in New Issue
Block a user