---
title: offset-anchor
slug: Web/CSS/offset-anchor
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/offset-anchor
---
<div>{{cssref}}{{seecompattable}}</div>
<p>La propriété CSS <strong><code>offset-anchor</code></strong> définit le point, à l'intérieur d'une boîte d'un élément, qui se déplace le long d'un chemin {{cssxref("offset-path")}}.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css">/* Valeurs avec un movalues */
offset-anchor: top;
offset-anchor: bottom;
offset-anchor: left;
offset-anchor: right;
offset-anchor: center;
offset-anchor: auto;
/* Valeurs de pourcentages */
/* Type <percentage> */
offset-anchor: 25% 75%;
/* Valeurs de longueur */
/* Type <length> */
offset-anchor: 0 0;
offset-anchor: 1cm 2cm;
offset-anchor: 10ch 8em;
/* Valeurs de décalage relatives à un bord */
offset-anchor: bottom 10px right 20px;
offset-anchor: right 3em bottom 10px;
/* Valeurs globales */
offset-anchor: inherit;
offset-anchor: initial;
offset-anchor: unset;</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>auto</code></dt>
<dd><code>offset-anchor</code> reçoit la même valeur que {{cssxref("transform-origin")}} sauf si {{cssxref("offset-path")}} vaut <code>none</code>, dans ce cas, elle récupère la valeur de {{cssxref("offset-position")}}.</dd>
<dt><code><position></code></dt>
<dd>Une position ({{cssxref("<position>")}}) définie par un couple de coordonnées X/Y qui permet de placer un objet par rapport aux bords de sa boîte. On peut définir la position à partir de une à quatre valeurs. Pour plus d'informations, voir les pages sur {{cssxref("<position>")}} et {{cssxref("background-position")}}. La syntaxe à trois valeurs ne fonctionne pas pour <code><position></code>, excepté pour <code>background(-position)</code>.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<p>Dans l'exemple suivant, on dispose de trois éléments {{htmlelement("div")}} imbriqués chacun dans un élément {{htmlelement("section")}}. Chaque <code><div></code> se déplace sur le même chemin {{cssxref("offset-path")}} (une ligne horizontale mesurant 200 pixels). Les trois blocs possèdent une couleur ({{cssxref("background-color")}}) et une valeur <code>offset-anchor</code> différentes.</p>
<p>Chaque élément <code><section></code> a été mise en forme avec un dégradé linéaire afin de fournir une indication visuelle du chemin.</p>
<p>On peut voir que la première valeur, <code>auto</code>, déplace l'élément sur son centre. La deuxième et la troisième déplacent le <code><div></code> par le coin supérieur droit et le coin inférieur gauche respectivement.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><section>
<</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor1</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">>
</section>
<section>
</span><span class="tag token"><span class="punctuation token"> <</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor2</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">>
</section>
<section>
</span><span class="tag token"><span class="punctuation token"> <</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor3</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code>
</section>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
offset-path: path('M 0,20 L 200,20');
animation: move 3000ms infinite alternate ease-in-out;
width: 40px;
height: 40px;
}
section {
background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%);
border: 1px solid #ccc;
margin-bottom: 10px;
}
.offset-anchor1 {
offset-anchor: auto;
background: cyan;
}
.offset-anchor2 {
offset-anchor: right top;
background: purple;
}
.offset-anchor3 {
offset-anchor: left bottom;
background: magenta;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples', '100%', '300')}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Spécification</th>
<th>État</th>
<th>Commentaires</th>
</tr>
<tr>
<td>{{SpecName('Motion Path Level 1', '#offset-anchor-property', 'offset-anchor')}}</td>
<td>{{Spec2('Motion Path Level 1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("css.properties.offset-anchor")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("offset")}}</li>
<li>{{cssxref("offset-distance")}}</li>
<li>{{cssxref("offset-rotation")}}</li>
<li><a href="/fr/docs/Web/SVG/Tutoriel/Paths">L'élément SVG <code><path></code></a></li>
</ul>