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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera

Практикуйте свои знания

Какие из следующих значений может принимать свойство offset-position в CSS?
Считаете ли это полезным?