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".

This property is an experimental technology.

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

Syntax

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

Example of the offset-position property:

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

Try it Yourself »

Result

Values

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.This value can be specified using one to four values. If one value is defined, the second is assumed to be center. If two non-keyword values are specified, the first one represents the horizontal position and the second one represents the vertical position. If three or four values are specified, the length-percentage values are offsets for the preceding keyword values (Read the background-position property for more information).
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.