CSS offset-position Property

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

<div id="wrap">
<div id="motion-demo"></div>
</div>
#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%;
  }
}

Browser Support

The following table will show you the current browser support for the CSS offset-position property.

Desktop
Edge Chrome Firefox Opera Safari
116116xx?
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
116xxxx116

Last updated by CSSPortal on: 31st December 2023