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>

Result

CSS offset-position values list

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.

Browser support

chrome edge firefox safari opera

Practice Your Knowledge

What are the different types of CSS offset properties?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?