🌐 What Are top, right, bottom, left?

The CSS properties top, right, bottom, andleft—often called offset properties—are used to position elements when their position is set to anything other than static.

📌 The Four Offsets

Values can be px, %, rem, vh, etc..

🔧 1️⃣ Offsets with position: relative

The element stays in the flow, but moves visually relative to its original position.

.box {
  position: relative;
  top: 20px;   /* moves down */
  left: 30px;  /* moves right */
}

🔧 2️⃣ Offsets with position: absolute

Element is removed from flow and positioned relative to thenearest ancestor with position ≠ static.

.parent {
  position: relative; /* positioning context */
}

.child {
  position: absolute;
  top: 10px;
  right: 20px;
}

The child sits 10px from the top and 20px from the right of its parent.

🔧 3️⃣ Offsets with position: fixed

The element stays fixed to the viewport — even on scroll.

.button {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

Perfect for floating action buttons, chat icons, sticky banners, etc.

🔧 4️⃣ Offsets with position: sticky

Sticky elements move normally until a scroll threshold is reached. Then offsets define where they “stick.”

.header {
  position: sticky;
  top: 0;
}

📐 How Offsets Behave Together

For absolute and fixed positioning:

🧱 Example — Centering with Offsets

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

A classic trick to place elements perfectly centered.

🧪 Real-World Examples

1️⃣ Tooltip using absolute + offsets

.parent {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 0;
  padding: 6px;
  background: black;
  color: white;
}

2️⃣ Sticky header

header {
  position: sticky;
  top: 0;
  background: white;
}

3️⃣ Floating button

.fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #ff4081;
  padding: 15px;
  border-radius: 50%;
}

🧠 Special Note on Percent Values

Percentages in offsets behave differently:

⚠️ Common Mistakes

🔥 Summary

The top, right, bottom, and leftproperties give you precise control over element placement. Once you master how they interact with the different position values, you unlock powerful layout behaviors like floating buttons, sticky headers, tooltips, and complex UI overlays.

Learn more →MDN Docs 📘