CSS offset-position Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The offset-position property controls which point on an element’s box is treated as the anchor for placement when the element is positioned along a motion path or manipulated by the offset system. In practice this means it shifts the element’s alignment point inside its own box so that a different internal coordinate follows the motion trajectory defined for the element. When you change that anchor, the element’s visual relationship to the path or other alignment targets changes without altering the path geometry itself; this is what lets designers make, for example, the center, an edge, or a corner of a box follow a curve while the rest of the box remains offset from that curve.

This property is intended to be used in concert with the rest of the motion/offset toolset: the track the element follows is defined by offset-path, and how far along that track the anchor travels is governed by offset-distance. While those properties determine the route and progression, offset-position changes which point on the element is attached to the route. Because it modifies the anchor rather than the path, it’s a powerful way to control perceived alignment - for instance, to keep a particular visual feature of the element aligned to the path’s tangent or to offset the box from tight-fitting curves.

Placement from offset-position also composes with rotation and other geometric transforms: offset-rotate dictates how the element orients itself as that anchor moves, and transforms applied via transform are combined with the offset placement during rendering. That composition order affects the final visual position and orientation, so designers should consider whether they want transforms applied before or after the element is anchored to the path. Because offset-based placement is separate from normal document flow, it does not reserve the same layout space as static positioning, and it can therefore be used for independent animated motion and overlays without reflowing surrounding content.

When using offset-position in real layouts or animations, think about hit testing, clipping, and accessibility: moving an element’s anchor changes the apparent location of interactive controls and visual cues, which can affect keyboard focus, pointer targets, and how content is clipped by containers or masks. It’s often used to fine-tune how an object appears to follow a path, to shift emphasis to particular parts of a graphic, or to coordinate multiple elements so their visually important points track one another precisely during motion.

Definition

Initial value: auto
Applies to: transformable elements
Inherited: no
Computed value: for <length> the absolute value, otherwise a percentage
Animatable: a position
JavaScript syntax: object.style.offsetPosition

Syntax

offset-position: auto | <position>

Values

autoIndicates that the offset starting position is the top-left corner of the element's box. This is the default value.
<position>Specifies the position as an x/y coordinate to place an element relative to its box edges. The position can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be center.

Example

HTML

<div class="container">

  <div class="moving-box"></div>

</div>

CSS

.container {
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  position: relative;
  background-color: #f9f9f9;
}

.moving-box {
  width: 50px;
  height: 50px;
  background-color: #ff5722;
  
  /* 1. Define the initial position */
  offset-position: 10% 10%;
  
  /* 2. Define the path it will follow */
  offset-path: path('M 0 0 L 200 200');
  
  /* 3. Animate the movement along that path */
  animation: move 3s infinite alternate ease-in-out;
}

@keyframes move {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS offset-position property. Hover over a browser icon to see the version that first introduced support for this CSS property.