position — static, relative, absolute, fixed
Controls how an element is positioned. The most confusing CSS property — play with it.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
static (default) — normal flow, top/left have no effect. relative — normal flow, but top/left/right/bottom OFFSET it from its normal position. absolute — removed from flow, positioned relative to the NEAREST positioned ancestor (an ancestor with position: relative/absolute/fixed). fixed — positioned relative to the viewport (stays put on scroll). Always set position: relative on the parent when using position: absolute on a child.
✏️ Try these changes
-
Change container position: relative to position: static→ badge positions relative to <body> instead of container -
Change top: 10px to bottom: 10px→ badge moves to bottom-right -
Change right: 10px to left: 10px→ badge moves to top-left -
Change .badge position: absolute to position: fixed→ badge stays even when you scroll (won't show much here, but try in a real page)