2nd/10_Wiki/Topic_CSS/CSS_Position.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-static-and-relative	CSS Position Static and Relative	Frontend	draft	conceptual		position property position static position relative CSS positioning document flow		B	0.89	2026-06-23	2026-06-23			css web frontend w3schools position layout static relative	https://www.w3schools.com/css/css_position.asp

CSS Position

🎯 한 줄 통찰 (One-line insight)

The position property controls element placement: static follows normal flow, while relative offsets an element from its normal position via top/right/bottom/left. [S1]

🧠 핵심 개념 (Core concepts)

• Positioning overrides flow — CSS positioning is about controlling the placement of elements within a web page; you can override the normal document flow. [S1]
• position defines type — the position property specifies the positioning type for an element. [S1]
• Offset properties — elements are positioned to their final location with the top, bottom, left, and right properties. [S1]
• static is default — all HTML elements are positioned static by default and are not affected by the top, bottom, left, and right properties. [S1]
• relative offsets from normal — an element with position: relative; is positioned relative to its normal position in the document flow. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Static = leave it alone — position: static; keeps an element in the normal flow, ignoring offset properties. [S1]
• Relative = nudge, keep the gap — setting top/right/bottom/left on a relative element adjusts it away from its normal position, and other content is NOT adjusted to fill the gap left behind. [S1]

📖 세부 내용 (Details)

CSS Positioning CSS positioning is about controlling the placement of elements within a web page. With CSS positioning, you can override the normal document flow. [S1]

The CSS position Property The position property specifies the positioning type for an element. Elements are then positioned to their final location with the top, bottom, left, and right properties. [S1]

Position values [S1]

Value	Description
static	This is default. Element is positioned according to the normal document flow
relative	Element is positioned relative to its normal position in the document flow
fixed	Element is positioned relative to the viewport
absolute	Element is positioned relative to the nearest positioned ancestor
sticky	Element toggles between a relative and fixed position, depending on the scroll position

CSS position: static All HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with position: static; is always positioned according to the normal flow of the page: [S1]

div.static {
  position: static;
  border: 3px solid #73AD21;
}

CSS position: relative An element with position: relative; is positioned relative to its normal position in the document flow. Setting the top, right, bottom, and left properties will cause the element to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element: [S1]

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

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

• static — default; positioned according to the normal document flow and unaffected by offset properties. Choose when no special positioning is needed. [S1]
• relative — positioned relative to its normal position; offsets move it but leave its original gap, and other content is not adjusted to fill it. Choose to nudge an element while preserving surrounding layout. [S1]
• fixed — positioned relative to the viewport. [S1]
• absolute — positioned relative to the nearest positioned ancestor. [S1]
• sticky — toggles between relative and fixed depending on scroll position. [S1]

🛠️ 적용 사례 (Applied in summary)

The page's own examples are the applied cases: a div.static left in normal flow and a div.relative offset by left: 30px;, both with a #73AD21 border. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Static positioning (language: CSS):

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Relative positioning with offset (language: CSS):

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

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

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

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

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Display, CSS Max Width, CSS Visibility Hide
• 참조 맥락: Referenced whenever placing elements outside or relative to the normal document flow.

📚 출처 (Sources)

• [S1] W3Schools — CSS Position Static and Relative — https://www.w3schools.com/css/css_position.asp

📝 변경 이력 (Change history)

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