Propriété CSS offset-position

La propriété CSS offset-position définit le point de départ du chemin de décalage d'un élément — la position où se trouve l'élément avant d'être déplacé le long du chemin par offset-distance.

Les propriétés de chemin de mouvement permettent d'animer un élément le long d'un itinéraire personnalisé (une ligne, une courbe, un rayon) sans utiliser @keyframes sur top/left. Le chemin lui-même est défini avec offset-path ; offset-position répond à la question « où commence ce chemin ? » lorsque le chemin ne définit pas déjà sa propre origine.

Quand en avez-vous besoin ?

offset-position n'est pertinent que pour les chemins dont le point de départ n'est pas fixé par les données du chemin lui-même :

Elle s'applique lorsque offset-path est un ray() ou un path() simple qui repose sur une origine implicite.
Elle est ignorée lorsque offset-path est une geometry-box (comme border-box) ou une <basic-shape> (comme circle()), car celles-ci définissent leur propre point de référence.
Elle est également ignorée lorsque la position de l'élément est static, car l'élément n'est pas sorti du flux normal.

Une valeur typique comme offset-position: 50% 50% démarre le chemin de mouvement au centre du bloc conteneur ; auto le démarre à la position réelle de la boîte rendue de l'élément.

Avertissement

Il s'agit encore d'une fonctionnalité expérimentale de chemin de mouvement. La prise en charge par les navigateurs est incomplète (Chromium la prend en charge ; Firefox et Safari sont en retard), vérifiez donc la compatibilité actuelle et prévoyez une solution de remplacement avant de l'utiliser en production.

Valeur initiale	auto
S'applique à	Les éléments transformables.
Hérité	Non.
Animable	Oui.
Version	Motion Path Module Level 1
Syntaxe DOM	Object.style.offsetPosition = "auto";

Syntaxe

Syntaxe CSS de offset-position

offset-position: auto | <position> | initial | inherit;

Où <position> accepte une à quatre valeurs, exactement comme background-position : une seule valeur définit la position horizontale (la verticale prend par défaut la valeur center), deux valeurs définissent d'abord l'horizontale puis la verticale, et des paires mot-clé/longueur peuvent être combinées.

Exemple de la propriété offset-position

L'élément ci-dessous démarre son chemin de mouvement à 100px 100px à l'intérieur de son conteneur et suit un ray(45deg) :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element1 {
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #666;
      }
      #element2 {
        width: 100px;
        height: 100px;
        background-color: #1c87c9;
        position: absolute;
        top: 90px;
        left: 100px;
        offset-position: 100px 100px;
        offset-anchor: center;
        offset-path: ray(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Offset-position property example</h2>
    <div id="element1">
      <div id="element2"></div>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Valeurs

Valeur	Description
auto	Indique que la position initiale est la position de la boîte spécifiée par la propriété position.
`<position>`	Définit la position initiale, avec le bloc conteneur comme zone de positionnement et un point sans dimension (boîte de taille nulle) comme zone d'objet. Cette valeur peut être spécifiée à l'aide d'une à quatre valeurs. Si une seule valeur est définie, la seconde est supposée être center. Si deux valeurs non-mot-clé sont spécifiées, la première représente la position horizontale et la seconde la position verticale. Si trois ou quatre valeurs sont spécifiées, les valeurs en longueur-pourcentage sont des décalages par rapport aux valeurs de mot-clé précédentes (consultez la propriété background-position pour plus d'informations).
initial	Fait que la propriété utilise sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Propriétés de chemin de mouvement associées

offset-position est un élément du module CSS Motion Path. Vous l'associerez généralement avec :

offset-path — l'itinéraire que l'élément parcourt.
offset-distance — la distance parcourue le long de cet itinéraire (animez cette valeur pour créer un mouvement).
offset-anchor — le point de l'élément qui est placé sur le chemin.
offset-rotate — si et comment l'élément tourne en suivant le chemin.

Exercice

Pratique

Quels sont les différents types de propriétés CSS offset ?