1. css
  2. /properties
  3. /offset



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.


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');


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