Propriété offset-position de CSS

Page précédente offset-path
Page suivante offset-rotate

Définition et utilisation

offset-position L'attribut spécifie la position initiale de l'élément sur le chemin.

Si offset-path Si la fonction offset-position ne spécifie pas sa propre position de départ, offset-position La valeur détermine la position initiale de l'élément lors de son déplacement le long du chemin d'offset.

Exemple

Exemple 1

La position initiale de l'élément spécifié doit être en bas à droite :

#square {
  width: 60px;
  height: 60px;
  background: blue;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

Essayer par vous-même

Exemple 2

Voir différentes positions de départ d'offset :

#square1 {
  width: 40px;
  height: 40px;
  background: pink;
  text-align:center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: red;
  text-align:center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: yellow;
  text-align:center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: cyan;
  text-align:center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavender;
  text-align:center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Essayer par vous-même

Syntaxe CSS

offset-position: auto|normal|position|initial|inherit;

Valeur de l'attribut

Valeur	Description
normal	Définit le point de départ de l'offset au centre de la boîte englobante (50% 50%). Valeur par défaut.
auto	Définit le point de départ de l'offset à l'angle supérieur gauche du cadre de l'élément.
position	Spécifiez une coordonnée x/y pour placer l'élément par rapport à la marge de son cadre. Il est possible d'utiliser de 1 à 4 valeurs pour définir la position.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit	Inherits cette propriété de son élément parent. Voir : inherit.

Détails techniques

Valeur par défaut :	normal
Héritabilité :	Non
Réalisation des animations :	Prise en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.offsetPosition="auto"