offset-distance

Definition

The offset-distance property is used to specify the distance between the anchor point of an element with position: sticky and the edge of its containing block. When an element is position: sticky, it becomes fixed to a certain position on the page when it reaches a certain threshold, and the rest of the content scrolls past it. The distance between the anchor point and the edge of the containing block is determined by this property.

Examples

Set the distance between an element and its nearest positioned ancestor:

.parent {
  position: relative;
}

.child {
  position: absolute;
  offset: 20px;
  offset-distance: 50px;
}

Set the distance between an element and the nearest viewport edge:

.element {
  position: absolute;
  offset: 20px;
  offset-distance: 50px;
  offset-anchor: viewport;
}

Set the distance between an element and a path:

.element {
  position: absolute;
  offset: 20px;
  offset-distance: 50px;
  offset-path: path('M 100 200 Q 200 100 300 200');
}

Values

Best Practices

• Use offset-distance in conjunction with other offset properties to position an element precisely.
• When using offset-distance with offset-path, be mindful of the path's shape and how it will affect the element's position.
• Avoid using offset-distance with negative values, as it can cause the element to be positioned outside of its containing block.
• Test your designs on different devices and screen sizes to ensure that the element is positioned correctly.
• Be mindful of performance when using offset-distance, as it can cause layout and rendering issues on complex or animated elements.

Browser Compatibility