CSS Position Offsets

CSS Position Offsets

Position offsets control where a positioned element is placed. Offsets are applied using top, right, bottom, and left.

Offsets only work when an element’s position is set to something other than static.

Top, Right, Bottom, Left

Offsets move an element from its reference edge:

• top moves the element down from the top edge
• right moves the element left from the right edge
• bottom moves the element up from the bottom edge
• left moves the element right from the left edge

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

Offsets with position: relative

With position: relative, the element stays in the normal flow, but it is visually moved using offsets. The original space is still reserved.

.label {
  position: relative;
  top: 6px;
}

Offsets with position: absolute

With position: absolute, the element is removed from the normal flow and positioned relative to the nearest positioned ancestor.

.card {
  position: relative;
}

.card .icon {
  position: absolute;
  top: 12px;
  right: 12px;
}

If no positioned ancestor exists, the element is positioned relative to the page.

Offsets with position: fixed

With position: fixed, offsets are applied relative to the viewport, and the element stays in the same place even when the page scrolls.

.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Using inset

The inset property is shorthand for setting top/right/bottom/left.

.modal {
  position: fixed;
  inset: 20px;
}

This is equivalent to:

.modal {
  position: fixed;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
}

Code Challenge

Goal: Place a badge inside a card and a floating button on the page using offsets.

HTML:

<div class="card">
  <span class="badge">SALE</span>
  <h3>Offsets</h3>
  <p>Place the badge in the corner using top/right.</p>
</div>

<a href="#" class="fab">+</a>

Task:

• Make the card a positioned container
• Place the badge in the top-right corner of the card
• Place the floating button at the bottom-right of the viewport

Try a Solution:

.card {
  position: relative;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
  max-width: 520px;
}

.badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d6e4ff;
  background: #f3f6ff;
  font-size: 12px;
}

.fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid #d6e4ff;
  background: #1f4bd8;
  color: #fff;
  font-weight: bold;
}

What’s Next?

Next, you will learn how z-index controls stacking order when elements overlap.