💻 easy.advice

What position property values do you know? What's the difference between them?

👨‍💻 Frontend Developer 🟠 May come up 🎚️ Medium
#CSS #HTML

Brief Answer

CSS position property defines how an element is positioned on the page:

  1. static — normal document flow (default) 📄
  2. relative — relative to its normal position 📍
  3. absolute — relative to nearest positioned parent 🎯
  4. fixed — relative to browser window 🔒
  5. sticky — combination of relative and fixed 📌
/* Main position values */
.static { position: static; }
.relative { position: relative; top: 10px; }
.absolute { position: absolute; top: 0; left: 0; }
.fixed { position: fixed; top: 0; right: 0; }
.sticky { position: sticky; top: 20px; }

Full Answer

The position property is like a coordinate system for elements! It defines how an element will be placed on the page and what it will be positioned relative to. 🗺️

1. position: static (default)

Element stays in normal document flow:

.static-element {
  position: static;
  /* top, right, bottom, left are ignored */
}
<div class="static-element">Normal element</div>

Features:

  • Properties top, right, bottom, left don’t work
  • Element takes space in document flow
  • Default behavior for all elements

2. position: relative

Positioning relative to its normal place:

.relative-element {
  position: relative;
  top: 20px;
  left: 30px;
  background: lightblue;
}
<div>Element before</div>
<div class="relative-element">Shifted element</div>
<div>Element after</div>

Features:

  • Element shifts from its normal place
  • Space in document flow is preserved
  • Creates positioning context for child elements

3. position: absolute

Positioning relative to nearest positioned parent:

.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 2px solid #333;
}
 
.absolute-element {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 50px;
  background: coral;
}
<div class="container">
  <div class="absolute-element">Absolute</div>
</div>

Features:

  • Element is removed from document flow
  • Positioned relative to nearest parent with position ≠ static
  • If no such parent exists — relative to <html>

4. position: fixed

Positioning relative to browser window:

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #333;
  color: white;
  z-index: 1000;
}
 
.fixed-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #007bff;
  border-radius: 50%;
}
<header class="fixed-header">Fixed header</header>
<button class="fixed-button">↑</button>

Features:

  • Element always stays in same place when scrolling
  • Removed from document flow
  • Positioned relative to viewport

5. position: sticky

Hybrid behavior of relative + fixed:

.sticky-nav {
  position: sticky;
  top: 0;
  background: white;
  border-bottom: 1px solid #ddd;
  z-index: 100;
}
 
.sticky-sidebar {
  position: sticky;
  top: 20px;
  height: fit-content;
}
<nav class="sticky-nav">Sticky navigation</nav>
<aside class="sticky-sidebar">Sidebar</aside>

Features:

  • Behaves like relative until reaching threshold
  • Becomes fixed when scrolling
  • Stays within parent container boundaries

Practical Examples

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
 
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
}

Tooltip

.tooltip-container {
  position: relative;
  display: inline-block;
}
 
.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}
 
.tooltip-container:hover .tooltip {
  opacity: 1;
}

Card with badge

.card {
  position: relative;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
 
.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

Positioning Context

Elements with position ≠ static create positioning context:

.parent {
  position: relative; /* Creates context */
}
 
.child {
  position: absolute;
  top: 0; /* Relative to .parent */
  left: 0;
}

Z-index and layers

The z-index property only works with positioned elements:

.layer-1 {
  position: relative;
  z-index: 1;
}
 
.layer-2 {
  position: absolute;
  z-index: 2; /* Above layer-1 */
}
 
.layer-3 {
  position: fixed;
  z-index: 999; /* Topmost */
}

Comparison Table

ValueDocument FlowRelative ToScrolling
static✅ Stays—Scrolls
relative✅ StaysIts placeScrolls
absolute❌ RemovedParentScrolls
fixed❌ RemovedViewportDoesn’t scroll
sticky✅ Stays*ParentConditional

Best Practices

  1. Use relative to create positioning context 📍
  2. Absolute for precise placement inside container 🎯
  3. Fixed for UI elements — headers, buttons 🔒
  4. Sticky for navigation and sidebars 📌
  5. Don’t forget z-index for layer management 📚

Common Mistakes

❌ Wrong:

.element {
  position: static;
  top: 10px; /* Doesn't work */
}

✅ Correct:

.element {
  position: relative;
  top: 10px;
}

Conclusion

The position property is fundamental for creating complex layouts:

  • static — normal behavior
  • relative — offset from normal place
  • absolute — precise positioning
  • fixed — fixed relative to screen
  • sticky — smart sticking

Proper use of positioning helps create intuitive and functional interfaces! 🎨