X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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

Syntax

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

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: 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>

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.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

Practice Your Knowledge

The offset-position property specifies



Do you find this helpful?

Related articles