CSS offset-position Property

The offset-position property specifies the initial position of the offset path.

If the position property is specified with "static" value, the offset-position will be ignored.

The offset-position is also ignored if the offset-path is a "geometry-box", or a "basic shape".

Initial Value auto
Applies to Transformable elements.
Inherited No.
Animatable Yes.
Version Motion Path Module Level 1
DOM Syntax Object.style.offsetPosition = "auto";


offset-position: auto | <position> | initial | inherit;


<!DOCTYPE html>
    <title>Title of the document</title>
      position: relative;
      width: 300px;
      height: 300px;
      border: 2px solid #666;
      width: 100px;
      height: 100px;
      background-color: #1c87c9;
      position: absolute;
      top: 90px;
      left: 100px;
      offset-position: auto;
      offset-anchor: center;
      offset-path: ray(45deg);
    <h2>Offset-position property example</h2>
    <div id="element1">
      <div id="element2"></div>


Value Description
auto Indicates that the initial position is the position of the box which is specified with position property.
<position> Specifies the initial position, with the the containing block as the positioning area and a dimensionless point (zero-sized box) as the object area.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Related articles