---
id: css-position-fixed-and-absolute
title: "CSS Position Fixed and Absolute"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["position fixed", "position absolute", "fixed positioning", "absolute positioning", "CSS fixed absolute", "positioned ancestor"]
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_fixed_absolute.asp"]
applied_in: []
github_commit: ""
---

# [[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.

```css
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.

```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;
}
```

**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):
```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):
```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).