---
title: offset-position
slug: Web/CSS/offset-position
tags:
  - CSS
  - CSS Motion Path
  - CSS Property
  - Experimental
  - Property
  - offset-position
  - 'recipe:css-property'
translation_of: Web/CSS/offset-position
---
<div>{{CSSRef}}{{seecompattable}}</div>

<p><strong><code>offset-position</code></strong> は CSS のプロパティで、 {{cssxref("offset-path")}} の<a href="https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position">初期位置</a>を定義します。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/* &lt;percentage&gt; 値 */
offset-position: 25% 75%;

/* &lt;length&gt; 値 */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/* 辺とオフセット値 */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

/* グローバル値 */
offset-position: inherit;
offset-position: initial;
offset-position: unset;
</pre>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>初期位置は {{cssxref("position")}} プロパティで指定されたボックスの位置です。</dd>
 <dt id="&lt;position>"><code>&lt;position&gt;</code></dt>
 <dd>{{cssxref("&lt;position&gt;")}} です。位置は x/y 座標を定義し、要素のボックスの辺から相対的にアイテムを配置します。1つから4つの値を使って定義することができます。キーワード以外の値を2つ指定した場合、1つ目の値は水平方向の位置を、2つ目の値は垂直方向の位置を表します。1つの値のみを指定した場合は、2番目の値は <code>center</code> とみなされます。3 つまたは 4 つの値が使用される場合、長さとパーセントの値は、前のキーワード値からのオフセットとなります。これらの値タイプの詳細については、 {{cssxref("background-position")}} を参照してください。</dd>
</dl>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Setting_initial_offset_position" name="Setting_initial_offset_position">初期オフセット位置の設定</h3>

<pre class="brush: html notranslate">&lt;div id="motion-demo"&gt;&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">#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%;
  }
}</pre>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>仕様書</th>
   <th>状態</th>
   <th>備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Motion Path Level 1', '#offset-position-property', 'offset-position')}}</td>
   <td>{{Spec2('Motion Path Level 1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.offset-position")}}</p>