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

Warning

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

CSS offset-position syntax

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

Example of the offset-position property:

CSS offset-position code example

<!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: 100px 100px;
        offset-anchor: center;
        offset-path: ray(45deg);
      }
    </style>
  </head>
  <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 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 parent element.

Syntax

Example of the offset-position property:

Result

Values

Practice