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

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

Если свойство position установлено в значение "static", свойство offset-position будет игнорировано.

Свойство offset-position также будет игнорировано, если свойство offset-path установлено как "geometry-box" или "basic shape".

Значение по умолчанию	auto
Применяется	К флекс-эК трансформируемым элементам.
Наследуется	Нет
Анимируемое	Да
Версия	Motion Path Module Level 1
DOM синтаксис	Object.style.offsetPosition = "auto";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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: auto;
      offset-anchor: center;
      offset-path: ray(45deg);
      }
    </style>
  <body>
    <h2>Пример свойства offset-path</h2>
    <div id="element1">
      <div id="element2"></div>
    </div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
auto	Указывает, что исходное положение совпадает с положением блока, установленным с помощью свойства position.
<position>	Указывает исходное положение, где содержащий блок является позиционной областью, а безмерная точка - областью объекта.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.