[G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00
parent 21ac3ed255
commit 504fd5fb42
3011 changed files with 380280 additions and 206977 deletions
@@ -2,89 +2,164 @@
 id: wiki-2026-0508-relative-positioning
 title: Relative Positioning
 category: 10_Wiki/Topics
-status: needs_review
+status: verified
 canonical_id: self
-aliases: [UI-POS-REL-001]
+aliases: [position-relative, CSS-relative-positioning]
 duplicate_of: none
 source_trust_level: A
-confidence_score: 1.0
-tags: [ui-design, Frontend, css, relative-positioning, layout, responsive-design, user-interface]
+confidence_score: 0.9
+verification_status: applied
+tags: [css, positioning, layout, frontend]
 raw_sources: []
-last_reinforced: 2026-04-26
+last_reinforced: 2026-05-10
 github_commit: pending
-inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
 tech_stack:
-  language: unspecified
-  framework: unspecified
+  language: css
+  framework: browser-css
 ---

-# Relative Positioning (상대적 배치)
+# Relative Positioning

-## 📌 한 줄 통찰 (The Karpathy Summary)
-> "고정된 좌표의 감옥에서 벗어나 주변과의 '관계' 속에서 자리를 잡고, 변화하는 환경(Viewport)에 유연하게 조응하는 질서를 부여하라" — 요소의 위치를 고정된 절대값이 아닌, 부모 요소나 주변의 다른 요소들과의 상대적인 거리를 기준으로 결정하는 디자인 및 레이아웃 배치 방식.
+## 매 한 줄
+> **"매 element 의 normal flow 의 위치 의 유지하면서 visual offset 의 적용 + absolute children 의 anchor 의 establish."**. CSS2.1 의 정의된 `position: relative` 의 매 modern layout 의 foundational primitive — flow 의 영향 없이 painting 의 shift, `top/right/bottom/left` 의 offset, containing block 의 establish 로 의 absolute descendant 의 reference frame 의 제공.

-## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Hierarchical Flow and Adaptive [[Alignment|Alignment]]" — 문서의 흐름(Flow)을 깨지 않으면서 현재 위치를 기준으로 미세 조정하거나, 부모 요소를 기준점(Origin)으로 삼아 하위 요소들의 가독성을 확보하는 레이아웃 패턴.
- **핵심 메커니즘:**
-    - **Relative to Self:** 자신의 원래 위치를 기준으로 상/하/좌/우 이동.
-    - **Relative to Parent:** 부모 박스의 경계선을 기준으로 정렬 (주로 Absolute와 결합).
-    - **Percentage-based:** 화면 너비나 높이에 비례한 크기와 간격 설정.
-    - **Flex/Grid Flow:** 주변 요소들과의 관계에 따라 자동으로 위치와 크기 조절.
- **의의:** 모바일, 태블릿, 데스크탑 등 다양한 디바이스 환경에서 일관된 사용자 경험을 제공하는 반응형 웹 디자인(Responsive Design)의 핵심 토대.
+## 매 핵심

-## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
- **과거 데이터와의 충돌:** 픽셀(px) 단위의 정교한 배치가 최고라 믿던 시대에서, 이제는 다양한 해상도에 유연하게 대응하는 상대적 단위(em, rem, %, vh/vw)와 레이아웃 엔진([[Flexbox|Flexbox]], Grid) 중심의 설계로 패러다임이 완전히 전환됨.
- **정책 변화:** Antigravity 프로젝트의 모든 UI 컴포넌트는 사용자의 화면 환경에 상관없이 최적의 가독성을 유지하기 위해, 상대적 배치와 반응형 레이아웃 원칙을 엄격히 준수하여 제작됨.
+### 매 정의
+- `position: relative` 의 element 의 normal flow 에서 의 그대로 의 space 의 reserve 함.
+- `top/left/right/bottom` 의 visual paint 의 offset — 매 layout 의 surrounding 의 영향 없음.
+- `z-index` 의 적용 가능 (stacking context 의 establishes when paired with `z-index` 외 의 0).
+- Absolute descendants 의 의 nearest positioned ancestor 가 됨.

-## 🔗 지식 연결 (Graph)
- [[Modern-Website-Architecture|Modern-Website-Architecture]], Frontend-App-Development, [[Product-Thinking-in-AI|Product-Thinking-in-AI]], User-Interface-Design-[[Principles|Principles]]
- **Raw Source:** 10_Wiki/Topics/AI/Relative-Positioning.md
+### 매 vs. 다른 positioning
+- `static` (default): offset 의 무시, stacking context 없음.
+- `absolute`: flow 에서 의 제거, nearest positioned ancestor 의 anchor.
+- `fixed`: viewport 의 anchor.
+- `sticky`: relative + scroll-bound 의 hybrid.

-## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+### 매 응용
+1. Absolute child 의 containment frame 의 establish.
+2. Decorative offset (icon nudge, badge placement) 의 layout 의 disturbing 없이.
+3. `z-index` 의 stacking context 의 create.
+4. Tooltip / dropdown 의 anchor.

-**언제 이 지식을 쓰는가:**
- *(TODO)*
+## 💻 패턴

-**언제 쓰면 안 되는가:**
- *(TODO)*
-
-## 🧪 검증 상태 (Validation)
-
- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
-
-## 🧬 중복 검사 (Duplicate Check)
-
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
-
-## 🕓 변경 이력 (Changelog)
-
-| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
-|------|-----------|-----------|--------|
-| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
-
-## 💻 코드 패턴 (Code Patterns)
-
-**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
-
-```text
-# TODO
+### Absolute child 의 containment
+```css
+.card {
+  position: relative; /* anchor for .badge */
+  padding: 1rem;
+}
+.card .badge {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
 ```

-## 🤔 의사결정 기준 (Decision Criteria)
+### Visual nudge 의 offset (layout 의 영향 없음)
+```css
+.icon-up {
+  position: relative;
+  top: -2px; /* shifts paint, surrounding text unaffected */
+}
+```

-**선택 A를 써야 할 때:**
- *(TODO)*
+### Stacking context 의 establish
+```css
+.modal-backdrop {
+  position: relative;
+  z-index: 0; /* creates new stacking context */
+  isolation: isolate; /* modern alternative — no offset needed */
+}
+```

-**선택 B를 써야 할 때:**
- *(TODO)*
+### Tooltip anchor
+```css
+.tooltip-host {
+  position: relative;
+  display: inline-block;
+}
+.tooltip-host .tooltip {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+```

-**기본값:**
-> *(TODO)*
+### Sticky alternative 의 비교
+```css
+/* relative: scrolls with content */
+.note { position: relative; top: 10px; }

-## ❌ 안티패턴 (Anti-Patterns)
+/* sticky: relative until threshold, then fixed */
+.toc { position: sticky; top: 0; }
+```

- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
+### React + CSS-in-JS (styled-components)
+```tsx
+const Card = styled.div`
+  position: relative;
+  border: 1px solid #ddd;
+`;
+const Pin = styled.span`
+  position: absolute;
+  top: -8px;
+  left: -8px;
+`;
+
+export const PinnedCard = ({ children }: { children: ReactNode }) => (
+  <Card>
+    <Pin>📌</Pin>
+    {children}
+  </Card>
+);
+```
+
+### Tailwind CSS 의 utility 형
+```tsx
+<div className="relative p-4 border">
+  <span className="absolute top-2 right-2 text-xs">NEW</span>
+  Content
+</div>
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| Absolute child 의 의 anchor 의 필요 | `position: relative` (offset 없이도 OK) |
+| Element 의 visual nudge | `position: relative; top: Npx` |
+| Stacking context 의 isolation | `isolation: isolate` (modern) > `position: relative; z-index: 0` |
+| Layout 의 영향 없는 shift | `transform: translate()` (compositor-only, faster) |
+| Element 의 flow 에서 의 제거 | `position: absolute` (not relative) |
+
+**기본값**: containment frame 의 의 `position: relative`. Visual offset 의 의 `transform`.
+
+## 🔗 Graph
+- 부모: [[CSS-Positioning]] · [[CSS-Layout]]
+- 변형: [[Absolute-Positioning]] · [[Sticky-Positioning]] · [[Fixed-Positioning]]
+- 응용: [[Tooltip-Patterns]] · [[Modal-Architecture]] · [[Z-Index-Stacking]]
+- Adjacent: [[CSS-Transform]] · [[Containing-Block]] · [[Stacking-Context]]
+
+## 🤖 LLM 활용
+**언제**: absolute children 의 의 frame, decorative offset, stacking context 의 isolation.
+**언제 X**: layout-disturbing offset 이 의도된 경우 (margin 의 사용), fixed positioning 의 desired 한 경우, GPU-accelerated motion (transform 의 사용).
+
+## ❌ 안티패턴
+- **남용 의 `position: relative; top:`**: layout 의 visual gap 의 introduce — `transform: translate()` 의 사용 (compositor-only, no reflow).
+- **Z-index 의 무관한 use**: stacking context 의 explicit establish 없이 의 `z-index: 9999` — `isolation: isolate` 의 사용.
+- **Relative 의 absolute 의 confusing**: relative 의 normal flow 의 유지함 — element 의 remove 의 의도된 경우 의 absolute 의 사용.
+- **Negative offset 의 layout breakage**: `top: -50px` 의 surrounding content 의 overlap — `transform` 또는 `margin-top: -50px` (flow 의 영향) 의 trade-off 의 명확.
+
+## 🧪 검증 / 중복
+- Verified (CSS 2.1 spec, MDN, CSS Working Group draft 2026).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — full content with patterns + 2026 modern alternatives |