CSS offset-position 属性

定义和用法

offset-position 属性指定元素在路径上的初始位置。

如果 offset-path 函数未指定其自身的起始位置，则 offset-position 的值决定了元素在沿偏移路径移动时的初始位置。

实例

例子 1

指定元素的初始位置应为右下角：

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

自分で試してみてください

例2

異なる偏移開始位置を確認してください：

#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);
}

自分で試してみてください

CSS文法

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

属性値

値 説明
normal 偏移開始位置を含むブロックの50% 50%に設定します。デフォルト値。
auto 偏移開始位置を要素フレームの左上隅に設定します。
position

x/y座標を指定して、要素をフレームの端に配置します。

位置を定義するために、1から4つの値を使用できます。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性は親要素から継承されます。参照してください inherit。

技術的詳細

デフォルト値： normal
継承性： いいえ
アニメーション作成： サポートしています。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript文法： object.style.offsetPosition="auto"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
116 116 122 16 102

関連ページ

チュートリアル：SVG パス

チュートリアル：CSS アニメーション

参照：CSS offset 属性

参照：CSS offset-anchor 属性

参照：CSS offset-distance 属性

参照：CSS offset-path 属性

参照：CSS offset-rotate 属性