CSS offset-position Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The offset-position CSS property, is a relatively new addition to CSS that allows you to define the positioning reference point for an element within its containing block. By setting the offset-position, you can control where an element's box should be anchored, which can be particularly useful in layout scenarios where precise alignment is required. This property is often used in conjunction with other layout properties like position, top, left, or transform to fine-tune the positioning of elements, providing greater control over the layout and alignment of web content.

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 id="wrap">

  <div id="motion-demo"></div>

</div>

CSS

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  offset-position: left top;
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0%,
  20% {
    offset-distance: 0%;
  }
  80%,
  100% {
    offset-distance: 100%;
  }
}

Result

Editor