<strong>Experimental:</strong> <strong>This is an <a href="/en-US/docs/MDN/Guidelines/Conventionsdefinitions#experimental">experimental technology</a></strong><br>Check the <a href="#browsercompatibility">Browser compatibility table</a> carefully before using this in production.

<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/ &lt;percentage&gt; values /</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> 25% 75%<span class="token punctuation">;</span> <span class="token comment">/ &lt;length&gt; values /</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> 1cm 2cm<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> 10ch 8em<span class="token punctuation">;</span> <span class="token comment">/ Edge offsets values /</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> bottom 10px right 20px<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> right 3em bottom 10px<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> bottom 10px right<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> top right 10px<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">offset-position</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

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

Values

The initial position is the position of the box specified by the position property.

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

Formal syntax

auto | <position>
where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where <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

See also

Last modified: Aug 12, 2021, by MDN contributors