Propriété CSS offset-position

La propriété offset-position spécifie la position initiale du chemin de décalage.

Si la position propriété est définie sur la valeur "static", offset-position sera ignoré.

offset-position est également ignoré si le offset-path est un "geometry-box" ou une "basic shape".

WARNING

Cette propriété est une technologie expérimentale.

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

Syntaxe

Syntaxe CSS de offset-position

css

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

Exemple de la propriété offset-position :

Exemple de code CSS pour offset-position

html

<!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>

Try it Yourself »

Résultat

Liste des valeurs CSS offset-position

Valeurs

Valeur	Description
auto	Indique que la position initiale est celle de la boîte spécifiée par la propriété position.
`<position>`	Spécifie la position initiale, avec le bloc contenant comme zone de positionnement et un point sans dimension (boîte de taille nulle) comme zone de l'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 de longueur/pourcentage sont des décalages par rapport aux valeurs mot-clé précédentes (Consultez la propriété background-position pour plus d'informations).
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Propriété CSS offset-position ​

Syntaxe ​

Exemple de la propriété offset-position : ​

Résultat ​

Valeurs ​

Practice ​

Propriété CSS offset-position

Syntaxe

Exemple de la propriété offset-position :

Résultat

Valeurs

Practice