2nd/10_Wiki/Topic_CSS/CSS_Position_Fixed_Absolute.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-fixed-and-absolute	CSS Position Fixed and Absolute	Frontend	draft	conceptual		position fixed position absolute fixed positioning absolute positioning CSS fixed absolute positioned ancestor		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools position layout	https://www.w3schools.com/css/css_positioning_fixed_absolute.asp

CSS Position Fixed and Absolute

🎯 한 줄 통찰 (One-line insight)

position: fixed pins an element to the viewport so it stays put while the page scrolls, while position: absolute positions an element relative to its nearest positioned ancestor (or the document body) and removes it from normal flow. [S1]

🧠 핵심 개념 (Core concepts)

• position: fixed — the element stays in the same place relative to the viewport, keeping its position even during page scrolling. [S1]
• fixed does not leave a gap — fixed elements do not create a gap in the normal document flow where they would otherwise have been placed. [S1]
• placement via offsets — the top, right, bottom, and left properties determine the final placement of a fixed element. [S1]
• position: absolute — the element is positioned relative to its nearest positioned ancestor (an ancestor whose position value is something other than static). [S1]
• fallback to body — if an absolutely positioned element has no positioned ancestor, it is positioned relative to the document body and scrolls with the page. [S1]
• removed from flow + overlap — absolutely positioned elements are removed from the normal document flow and can overlap other elements. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Viewport-anchored UI — pair position: fixed with corner offsets (e.g. bottom: 0; right: 0;) to keep an element parked in a viewport corner regardless of scroll. [S1]
• Relative container + absolute child — give a parent position: relative so an position: absolute child is positioned against that parent rather than the page body. [S1]
• Text-on-image overlay — combine a positioned container with absolutely positioned text to place captions at corners or center of an image. [S1]

📖 세부 내용 (Details)

CSS position: fixed [S1] An element with position: fixed remains stationary relative to the viewport, maintaining its position even during page scrolling. The top, right, bottom, and left properties determine the element's final placement. Fixed elements do not create gaps in the normal document flow.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

CSS position: absolute [S1] An element with position: absolute is positioned relative to its nearest positioned ancestor (one with a position value other than static). If no positioned ancestor exists, it references the document body and scrolls with the page. Absolute positioned elements are removed from the normal document flow, and can overlap other elements.

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid green;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid red;
}

Positioning Text On an Image [S1] The page demonstrates text placement on images with options for positioning at Top Left, Top Right, Bottom Left, Bottom Right, and Centered locations, each with its own interactive example. The exact CSS for each corner variant was not provided verbatim in the fetched source — Not found in source.

🛠️ 적용 사례 (Applied in summary)

The page's own applied examples are the corner-pinned fixed box (div.fixed parked at the bottom-right of the viewport) and the relative-container/absolute-child pair, plus the text-on-image overlay use case. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Pin an element to a viewport corner (language: CSS):

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Position a child against a relatively positioned parent (language: CSS):

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid green;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid red;
}

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

• fixed — anchor to the viewport; element stays visible during scroll and leaves no gap in flow. Choose for always-visible UI (e.g. a corner widget). [S1]
• absolute — anchor to the nearest positioned ancestor (or body); element is removed from flow and can overlap others; it scrolls with the page when anchored to the body. Choose to precisely place an element within a known positioned container. [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 Sticky, CSS Position Offsets, CSS Z-index
• 참조 맥락: Referenced whenever an element must be pinned to the viewport or precisely placed within a positioned container.

📚 출처 (Sources)

• [S1] W3Schools — CSS Position Fixed and Absolute — https://www.w3schools.com/css/css_positioning_fixed_absolute.asp

📝 변경 이력 (Change history)

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