Position Offsets and Inset Properties

What Is It?

Offset properties place positioned boxes relative to their containing block or shift a relatively positioned box from its normal location. Logical offsets follow the writing axes.

Properties, Tags and Attributes Explained

• top / right / bottom / left: Physical offsets for a positioned element. They do not move a position: static box.
• inset: Shorthand for top, right, bottom, and left in the same one-to-four-value order as margin.
• inset-inline / inset-block: Logical shorthands for inline-axis and block-axis start/end offsets.
• inset-inline-start / inset-inline-end: Place a positioned box relative to the start or end of the inline axis.
• inset-block-start / inset-block-end: Place a positioned box relative to the start or end of the block axis.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Fill an area with inset

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Offsets and Inset Properties</title>
  <style>
    .stage { position: relative; height: 160px; background: #f1f5f9; }
    .box { position: absolute; inset: 16px 24px; background: #dbeafe; padding: 12px; }
  </style>
</head>
<body>
  <div class="stage"><div class="box">16px from top and bottom; 24px from left and right.</div></div>
</body>
</html>

What you see: With auto dimensions and opposite offsets, the box fills the remaining space. Use inset for overlays inside a positioned component.

Example 2: Use each physical side

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Offsets and Inset Properties</title>
  <style>
    .stage { position: relative; height: 150px; background: #f1f5f9; }
    .box { position: absolute; top: 12px; right: 20px; bottom: 16px; left: 24px; padding: 12px; background: #dcfce7; }
  </style>
</head>
<body>
  <div class="stage"><div class="box">Four physical offsets</div></div>
</body>
</html>

What you see: The box stretches between the offsets. Use longhands when changing one edge independently.

Example 3: Follow logical start and end

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Offsets and Inset Properties</title>
  <style>
    .stage { position: relative; height: 150px; background: #f1f5f9; }
    .box { position: absolute; inset-inline-start: 12px; inset-inline-end: 20px; inset-block-start: 16px; inset-block-end: 24px; background: #fde68a; padding: 12px; }
  </style>
</head>
<body>
  <div class="stage" dir="rtl"><div class="box">Logical offsets follow direction.</div></div>
</body>
</html>

What you see: In right-to-left horizontal writing, inline-start is the right edge. Use logical offsets for language-aware component placement.

Example 4: Logical axis shorthands

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Offsets and Inset Properties</title>
  <style>
    .stage { position: relative; height: 150px; }
    .box { position: absolute; inset-inline: 20px; inset-block: 12px 24px; background: #e0e7ff; }
  </style>
</head>
<body>
  <div class="stage"><div class="box">Inline 20px; block start 12px and end 24px.</div></div>
</body>
</html>

What you see: The axis shorthands specify paired offsets. Change writing-mode in the stage to explore how their physical directions change.

When and Where to Use It

Use inset for full-area overlays, physical sides for deliberately physical placement, and logical insets for translated components. Absolute positioning needs a suitable containing block such as a position: relative ancestor.

Common Mistake or Useful Tip

Offsetting a relative box keeps its original space. Absolute and fixed boxes leave normal flow; reserve space when needed so important content is not covered.

Try It Yourself

Switch the parent dir between ltr and rtl in the logical-offset example and identify which edges swap.