CSS свойство offset-position

Предыдущая страница offset-path
Следующая страница offset-rotate

Определение и использование

offset-position свойство определяет начальное положение элемента на траектории.

Если offset-path функция не определяет свое начальное положение, то offset-position worth determines the initial position of the element when it moves along the offset path.

Пример

Пример 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"