CSS Tutorial

CSS Position Offsets

The offset properties top, right, bottom, and left decide exactly where a positioned element sits. They are the levers you pull after choosing a position value, and they behave differently for each positioning mode.

What the offset properties do

Once an element is positioned relative, absolute, fixed, or sticky, the offsets move it away from a reference edge. A value like top: 20px pushes the element 20px down from the top of its reference box, while left: 20px pushes it 20px to the right of the left edge. Offsets have no effect on static elements.

Property	Moves the element…
top	Down, away from the top edge
right	Left, away from the right edge
bottom	Up, away from the bottom edge
left	Right, away from the left edge

What the offsets are measured against

relative — measured from the element's own normal position.
absolute — measured from the nearest positioned ancestor's padding edge.
fixed — measured from the viewport edges.
sticky — measured from the scroll container while sticking.

Placing an element in each corner

Inside a positioned container, absolute offsets let you drop elements into any corner. The demo pins four coloured tags using different offset pairs.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; padding: 20px; }
  .stage {
    position: relative;
    height: 180px;
    background: #e2e8f0;
  }
  .tag {
    position: absolute;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
  }
  .tl { top: 8px;    left: 8px;   background: #2563eb; }
  .tr { top: 8px;    right: 8px;  background: #16a34a; }
  .bl { bottom: 8px; left: 8px;   background: #dc2626; }
  .br { bottom: 8px; right: 8px;  background: #7c3aed; }
</style>
</head>
<body>
  <div class="stage">
    <span class="tag tl">top-left</span>
    <span class="tag tr">top-right</span>
    <span class="tag bl">bottom-left</span>
    <span class="tag br">bottom-right</span>
  </div>
</body>
</html>

Stretching to cover with all four offsets

Setting top, right, bottom, and left all to 0 stretches an absolutely positioned element to fill its container — perfect for overlays. The shorthand inset: 0 does the same thing.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; padding: 20px; }
  .frame { position: relative; height: 160px; background: #cbd5e1; }
  .overlay {
    position: absolute;
    inset: 0;                 /* top/right/bottom/left = 0 */
    background: rgba(37,99,235,0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
</head>
<body>
  <div class="frame">
    <div class="overlay">Overlay covers the whole frame</div>
  </div>
</body>
</html>

💡

The inset shorthand sets all four offsets at once. inset: 0 equals top:0; right:0; bottom:0; left:0, and inset: 10px 20px sets vertical then horizontal offsets.

Key points

Offsets only work when position is not static.
top and left push down and right; bottom and right push up and left.
The reference edge depends on the position value (own spot, ancestor, or viewport).
Setting all four offsets (or inset: 0) stretches an absolute element to fill its container.