offset-position

Experimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The offset-position CSS property defines the initial position of the offset-path.

Syntax
/* Keyword values */
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/* <percentage> values */
offset-position: 25% 75%;

/* <length> values */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/* Edge offsets values */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

/* Global values */
offset-position: inherit;
offset-position: initial;
offset-position: revert;
offset-position: revert-layer;
offset-position: unset;
Values
 auto  The initial position is the position of the box specified by the position property.  <position>  A <position>. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It 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. If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s). For more explanation of these value types, see background-position.  Formal definition


Initial value
auto


Applies to
transformable elements


Inherited
no


Percentages
referToSizeOfContainingBlock


Computed value
for <length> the absolute value, otherwise a percentage


Animation type
a position


Formal syntax
offset-position =   auto        |  <position>  <position> =   [ left | center | right | top | bottom | start | end | <length-percentage> ]  |  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |  [ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ]  |  [ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]  <length-percentage> =   <length>      |  <percentage>  Examples
Setting initial offset position

<div id="motion-demo"></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% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

Specifications

Specification
Motion Path Module Level 1 # offset-position-property

Browser compatibility




Desktop
Mobile



Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on IOS
Samsung Internet



offset-position

No
See bug 638055.


No
See bug 638055.


No
See bug 1559232.

No

No
See bug 638055.

No

No
See bug 638055.


No
See bug 638055.


No
See bug 1559232.


No
See bug 638055.

No

No
See bug 638055.



See also
 offset offset-anchor offset-distance offset-path offset-rotate 

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.


Last modified: Apr 5, 2022, by MDN contributors


    
{'path': 'public/docs/css/offset-position.html', 'source': 'DevDocs.IO'}