1. css
  2. /properties
  3. /offset

offset

Definition

The offset property in CSS is used to define an element's position relative to its original position in the document flow. It allows you to move an element in a specific direction without affecting the layout of surrounding elements.

Examples

Move the element 10 pixels down and 20 pixels to the right:

.offset-example {
  offset-distance: 10px 20px;
}

Move the element 50% of its width to the right and 25% of its height up:

.offset-example {
  offset-position: 50% -25%;
}

Move the element 50 pixels away from the center in a direction that is 45 degrees clockwise from the top:

.offset-example {
  offset-path: path('M 0 0 Q 100 100 200 0');
}

Values

ValueDescription
offset-positionSpecifies the position of the element relative to its original position in the document flow.
offset-distanceSpecifies the distance that the element is moved from its original position.
offset-pathSpecifies the path that the element follows as it moves from its original position. This can be a basic shape or a more complex path defined using SVG syntax.

Best Practices

  • Use offset-position and offset-distance to move an element in a specific direction relative to its original position.
  • Use offset-path when you need more precise control over an element's movement.
  • Avoid using large negative values for offset-distance or offset-position, as this can cause the element to overlap with other content on the page.
  • Test the offset property in different browsers to ensure consistent behavior.
  • Consider using the will-change property to optimize performance when animating an element's offset.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes